/* CSS Document 
	Autèntic Tours
	(c) Connecta-t
*/
* {margin:0; padding:0; border-collapse:collapse;}
body {color: #222222; font-family: 'Roboto', Verdana, Arial; font-size: 18px; line-height: 26px;}
html {scroll-behavior: smooth;}		

/* GENERALS */
.cap, .cap_transp, .cap_hombra {width:100%; height: 80px; position:fixed; top:0; left:0; z-index: 5;}
.cap, .cap_hombra {background-color: rgba(255,255,255,0.9); box-shadow: 0 0 5px rgba(64,64,80, 0.25);}
.cap_transp {background-color: tranparent;}
.cos {width:100%; overflow:hidden;}
.cos_gris {background-color: #dedfe1;}
.peu {width:100%; padding-bottom: 20px;}
.cap_centre, .cos_centre, .menu_centre, .peu_centre, .cos_ample {width:90%; margin: 0 auto; max-width:1230px; position:relative; overflow:hidden;}
.cos_ample {width:100%; max-width:1366px;}
.cap_centre {height:100%;}
.cap_transp .logo {display: none;}
.cap .logo img, .cap_hombra .logo img {margin: 8px 0 0;}
.primer {margin-top: 80px;}
.gris, .fons_gris {background-color: #dedfe1}
h1 {text-align: center; font-size: 32px; line-height: 38px; color: #26348c;}
p {margin-bottom: 18px;}
p.sang {padding-left: 15px; text-indent: -15px; margin-bottom: 1px;}
.cos ul, .cos_centre ul {padding-left: 25px; list-style: none; margin-bottom: 18px;}   /*Elimina punts per defecte*/
.cos ul li::before, .cos_centre ul li::before {content: "\2022"; color: black; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;}
.dreta {text-align: right;}

/*MENU*/
.menu_resp {width: 40px; height: 40px; position: absolute; right: 0; top: 30px;}
.menu_resp polyline, .cap_hombra .blanc .menu_resp polyline {stroke: #26348c;}
.cap_hombra .blanc .menu_resp, .cap_hombra .negre .menu_resp {}
.tanca_resp {width: 40px; height: 40px; position: absolute; top: 30px; right: 0;
	background-image: url('img/tanca_resp.png'); background-repeat: no-repeat; background-position:center right;}
.caixa_menu {width: 100%; height: 100vh; max-height: 700px; top:0; right: 0; z-index: 20; color: white; position:absolute;  display:none;
	background-color: #26348cF7;}
.menu {width: 100%; height: 100%; position: relative;}
.menu_centre {width: 90%; max-width: 1230px; height: 100%; margin: 0 auto; position:relative;}
ul.menu_principal {padding: 125px 0 0;}
.menu_principal li {font-size: 25px; line-height: 30px; margin-bottom: 32px;}
.menu_principal li.sel {}
.menu li {list-style: none;}
.menu li a {color: white; text-decoration: none;}
.menu li.sel a {color: black;}
.menu li.sel a {color: black;}
.menu li a:hover, .menu li span:hover {cursor: pointer;}
.ancora {position: relative; top: -90px;}

/*Página Tour*/
h2, h3, .titol_p {color: #26348c; font-weight:bold; font-size: 20px;}
h2 {margin: 10px 0 20px; font-size: 22px;}
h3 {font-size: 18px;}
.tour_cap_img {position: relative; overflow:hidden; height: calc(100vh - 80px); max-height: 688px; }
.tour_cap_img > img {width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.caixa_degradat {position: absolute; width: 100%; bottom:0; background: linear-gradient(transparent, black); padding-top: 220px;}
.caixa_degradat h1 {color: white; font-size: 65px; line-height: 50px; margin-bottom: 80px;}
.caixa_degradat table {width: 100%; max-width: 450px; margin: 20px auto 60px; color: white; font-size: 22px;}
.caixa_degradat td {padding: 0 24px;} 
.caixa_degradat td:nth-child(2) {text-align: right;}
.boto_reserva_cap {display: inline-block; padding: 8px 20px; color: #26348c; font-weight: bold; border-radius: 23px; font-size: 20px;
	text-decoration:none; background-color: white;}
.cos_tour .destacat {width: 37.5%; background-color: #e3e3e3; padding: 40px 5%; font-size: 20px; line-height: 28px;}
.cos_tour .trobada {float:none; position: absolute; top: 0; left:0; height: calc(100% - 70px);}
.cos_tour .trobada h2 {margin:0; font-size: 20px;}
.cos_tour .trobada .p_trobada {padding-left: 22px;}
.boto_reserva {position: absolute; display: block; bottom: 0; right: 0; padding: 6px 18px; color: white; font-weight: bold; border-radius: 19px;
	text-decoration:none; background-color:#26348c;}
.cos_tour {margin: 0 auto;}
.text_dreta, .text_esquerra {width:47.5%; padding-top: 40px;}
.cos_ample .text_dreta, .cos_ample .text_esquerra {width:42.5%;}
.cos_ample .destacat {width: 32.5%}
.cos_ample .text_dreta {margin-right: 5%;}
.cos_ample .text_esquerra {margin-left: 5%;}
.text_dreta {float: right;}
.text_esquerra {float: left;}
.caixa_amida {background-color: #e3e3e3; padding: 40px 2.5%;}
.caixa_amida h2 {text-align: center; margin-top: 0;}
.caixa_boto_reserva {padding: 5px; position:relative;
		background-color: white;}
.data_hora {}
.data_hora b {font-size: 110%;}
.caixa_boto_reserva .boto {position:absolute; top: 0; right: 0; height: 100%;}
.caixa_boto_reserva .boto table {height:100%;}
.caixa_boto_reserva .boto td {height: 100%; vertical-align: center; padding: 0 10px; background-color:#26348c;}
.boto_grup {color: white; font-weight: bold;
	text-decoration:none;}

/*Formulari privats*/
.caixa_form_privat {width: calc(92% - 2px); max-width: 600px; height: calc(94vh - 22px); max-height: 650px; margin: 3vh auto; padding: 10px 2%; border: solid 1px #d3d3d3; z-index: 200;
	overflow:auto; position:relative;
	background-color: white;}
.tanca {position: absolute; top:2px; right:2px; width: 25px; height:25px; font-size: 20px; text-transform:uppercase; font-weight:bold; text-align:center; color: gray;}
.caixa_form_privat h3 {margin-bottom: 12px;}
.caixa_form_privat p, .caixa_form_privat .data_hora {font-size: 16px; margin-bottom: 12px; line-height: 20px;}
.caixa_label {display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;}
.caixa_label label {display: inline-block; width: 49%; padding: 0 0 8px; line-height: 20px;}
.caixa_label label:nth-child(1), .caixa_label label:nth-child(7), .caixa_label label:nth-child(8) {width:100%;}
.caixa_label label:nth-child(3) {display: none;}
.caixa_label input, .caixa_label textarea {width: calc(100% - 8px); padding: 8px 4px; font-size: 16px; border: none; border-radius: 0; 
	background-color: #e3e3e3;}
.caixa_label textarea {height: 90px; font-family: 'Roboto';}
.caixa_form_privat .caixa_boto_reserva {margin: 15px auto; min-height: 40px; border: none;}
.caixa_form_privat .boto_reserva {width: 120px;}
.caixa_form_privat .boto_grup {display: inline-block; width:100%; height: 100%; font-family:'Roboto'; font-size: 18px; font-weight:bold; color: white; border: none; border-radius: 0;
	background-color: transparent;}
.resposta {position: absolute; top:0; left:0; width: 95%; height:100%; padding: 0 2.5%; display:none;
	background-color: white;}
.resposta h3 {font-size: 26px; padding: 50px 0 70px; text-align:center; line-height: 32px;}
.resposta p {font-size: 125%; text-align:center; margin-bottom: 50px; line-height: 24px;} 


/*PEU*/
.peu {background-color: #26348c; color: white; font-size: 14px; min-height: 120px; margin-top: 40px; padding-top: 40px; overflow:hidden;}
.peu h3 {color: white; margin-bottom: 18px;}
.peu a {color: white; font-weight:bold;}
.peu_esquerra {float:left;}
.peu_dreta {float:right; text-align: right;}
.peu_esquerra, .peu_dreta {}
.menu_resp:hover, .tanca_resp:hover {cursor: pointer;}

/*ALTRES*/
.fons_fosc {position: fixed;top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; background-color: #000000B4;}

@media only screen and (max-width: 800px) {
	.text_dreta, .text_esquerra {float: none; width:100%;}
	.cos_ample .text_dreta, .cos_ample .text_esquerra {float:none; width: 100%;}
	.cos_ample .text_esquerra {margin-left: 2.5%; width: 95%;}

	.cos_tour .destacat {width: 90%;}
	.cos_tour .trobada {float:none; position: relative; top: auto; left:auto; height: auto;}
	.cos_tour .trobada .boto_reserva {}
	.caixa_amida {width: 95% !important; margin-right: 0 !important;}
}


@media only screen and (max-width: 480px) {
	.cap_centre, .cos_centre, .menu_centre, .peu_centre {width:95%;}
	.cap, .cap_transp, .cap_hombra {height: 60px;}
	.menu_resp {top: 15px;}
	.tour_cap_img {height: calc(100vh - 60px);}
	.caixa_degradat h1 {font-size: 40px;}
	.caixa_degradat table {font-size: 20px;}
	.caixa_degradat td {padding: 0 8px;} 
	.boto_reserva_cap {font-size: 18px;}
	.primer {margin-top: 60px;}
	.logo img {height: 45px;}
	.text_dreta, .text_esquerra {padding-top: 0	;}
	.destacat {margin-bottom: 25px;}
	.caixa_amida {margin-bottom: 0;}
	.caixa_amida h2 {padding-top: 30px;}
	.peu {margin-top:0;}
}