/*@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

:root {
	--font: "Fira Sans", Arial;
	/** CSS PRIMARY COLORS */
	--color-primary-a0:#fff;
	--color-primary-a10:#d6dde1;
	--color-primary-a20:#adbcc3;
	--color-primary-a30:#869ca7;
	--color-primary-a50:#607d8b;
	--color-primary-a60:#485d67;
	--color-primary-a70:#313e44;
	--color-primary-a80:#1c2225;
	--color-primary-a90:#000; /** EXAMPLES */
	color:var(--color-primary-a10);
	background-color:var(--color-primary-a90);


}
html {
	margin:0;
	padding: 0;
}
body {
	margin:0;
	padding: 20px;
	font:14px var(--font);
	background: #1A385A;
	/* background-image:url(/img/ball.png); */
	/* background-repeat:repeat; */
	/* background-position: -200px -299px; */
}
h1 {
    font: 300 24px/30px var(--font);
    margin: 0;
    padding: 0 0 20px;
}
h3 {
    font: 28px/30px var(--font);
    margin: 0;
    padding: 0 0 10px;
}
h3 + p {
    font: 300 20px/20px var(--font);
	margin: 0 0 10px
}
p {
    padding: 0 0 10px;
    margin: 0;
}
.header {
	text-align: center;
}
h1 .alt_h1 {
	display: block
}
h1 b {    
    font:30px/30px var(--font);
}
h1 img {
	margin:-8px 0 -4px 6px;
}
.header img.logo {
	height:100px;
	margin: -10px -35px 0px;
}
@media (max-width: 480px) {
	.header img.logo {
		height:60px
	}
}
.content {
    max-width: 900px;
    margin: 0 auto;
}
.cal_day {
    background: #fff;
    padding:20px;
    margin: 0 0 20px;
    border-radius: 20px;
    color:var(--color-primary-a70);
}
h2 {
    font:20px/30px var(--font);
    margin: -5px 0 10px;
    padding: 0;
}
table {
    width:100%;
    max-width: 800px;
    margin: 0 auto;
    table-layout: fixed;
}
td, th {
    text-align: center;
    padding: 3px 2px;
    font:14px/20px var(--font);
}
td:first-child, th:first-child {
	width:50px;
}
thead tr:first-child th {
    font:400 16px/24px var(--font);
	white-space:nowrap;
	overflow:hidden;
    text-overflow:ellipsis;
    padding: 10px 2px;
}
@media (max-width: 480px) {
	thead tr:first-child th {
	    font:400 14px/24px var(--font);
	}
}
@media (max-width: 480px) {
	thead tr:first-child th {
	    font:400 14px/24px var(--font);
	}
}
th.col {
    background:#f4f4f4;
}
thead tr:first-child th.col {
    background:#eee
}
td.yes {
    background: #BAE024;
    color:#fff;
    cursor: pointer;
}
td.yes:not(.yes2) {
	color:#0C2139
}
td.yes2 {
    background: #1B598B;
    color:#fff;
}
td.no {
    background: #eeeeee;
}
td:first-child {
    text-align: right;
    padding-right:10px;
}
tr.empty td:first-child {
    font:8px/5px var(--font);
    color:#999
}
tr.empty + tr.empty {
	/* display:none */
}
tr.empty td {
	/* background:#fff */
}
td[data-num] ~ td[data-num="0"] {
	box-shadow:-1px 0 #fff, 2px 0 #fff inset
}
th[data-num] ~ th[data-num="0"] {
	box-shadow:-1px 0 #fff, 2px 0 #fff inset
}
tr:first-child th.col ~ th {
	box-shadow:-1px 0 #fff, 2px 0 #fff inset
}
hr {
	width:30px;margin:0 0 0 auto; opacity: 0
}
td.yes:after {
    content:' h';
    opacity:0.5;
    font-size:12px
}
@media (max-width: 480px) {
    .gt480 { display: none }
}
@media (min-width: 480px) {
    .lt480 { display: none }
}
@media (max-width: 800px) {
    .gt800 { display: none }
}
@media (min-width: 800px) {
    .lt800 { display: none }
}

th[data-location=Rejo] .gt800 { display: none }
th[data-location=Rejo] .lt800 { display: inline }
.lang {
	border: 1px solid #fff;
	float:right;
	font:12px/20px var(--font);
	padding:2px 4px;
	border-radius:16px;
	cursor:pointer;
}
.lang:hover {
	background: #fff;
	color:var(--color-primary-a90)
}
#bookingMenu {
	display: none;
	position: absolute;
	background:#fff;
	border-radius:8px;
	border: 1px solid #eee;
	box-shadow:0 0 10px #bbb;
	padding:10px;
}
#bookingMenu a {
	display:inline-flex;
	padding:4px;
	border-radius:8px;
}
#bookingMenu svg {
	width:24px;
	height: 24px;
}
#bookingMenu a:hover {
	background:#f4f4f4;
}
#bookingMenu a:hover svg {
	fill: #000;
}
.locations {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 0 auto 20px;
	/* max-width:600px; */
	justify-content: center;
}
.location {
    background:var(--color-primary-a0);
    padding:10px;
    border-radius: 8px;
    flex-shrink:1;
    flex-grow:1;
    width: 33.3%;
    text-decoration: none;
    color: var(--color-primary-a90);
    overflow:hidden
}
.location .img {
	background: #1B598B;
	margin:-10px -10px 10px;
	max-height: 260px;
	overflow: hidden;
}
@media (min-width: 480px) {
	.location {
		max-width:260px
	}
}
@media (min-width: 800px) {
	.location {
		max-width:30%
	}
}
@media (max-width: 480px) {
	.location .img {
		max-height: unset;
	}
}
.location img {
	width:100%;
	height:auto;
	object-fit:scale-down;
	border-bottom:1px solid #ddd;
	xaspect-ratio: 1;
	opacity:0.85;
	--filter: hue-rotate(30deg) grayscale(0.5);
}
.location .name {
    font:bold 14px/20px var(--font);
	text-decoration: none;
	color:#000;
}
.location .addr {
    font:13px/20px var(--font);
}
.location .phone {
    font:13px/20px var(--font);
	color:#777
}
.location .phone {
    font:13px/20px var(--font);
	color:#777;
	margin:0 0 10px;
}
.location .buttons {
	display: flex;
	gap: 8px;
}
.location .buttons a {
	display: flex;
	text-decoration: none;
	border:1px solid #ddd;
	color: #777;
	align-content: center;
	align-items: center;
	padding: 2px 6px;
	gap:4px;
	font:12px/20px var(--font);
	border-radius:4px;
}
@media (min-width: 480px) {
	.location .buttons a {
		flex-grow: 1;
	}
	.location .buttons {
		justify-content: space-around;
	}
}
.location .buttons a:first-child {
	background:#1B598B;
	border-color:#1B598B;
	color:#fff
	
}
.location .buttons a svg {
	width:16px;
	height:16px;
}
.location .buttons a:first-child svg {
	fill:#fff
}
@media (max-width: 480px) {
	.locations {
		flex-direction: column;
	}
	.location {
		width:auto
	}
}
.legend {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 8px;
	margin: 20px 0 0;
	justify-content: center;
	font: 11px/14px var(--font);
}
.legend .col {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 4px;
}
.legend .item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.legend .yes {
	background: #BAE024;	
	color:#333;
	text-align:center;
	font:10px/20px var(--font)
}
.legend .yes2 {
    background: #1B598B;
    color: #fff;
    text-align:center;
    font:10px/20px var(--font)
}
.legend .yes:before {
	content:'1h'
}
.legend .yes2:before {
	content:'2h'
}
@media (max-width: 600px) {
	td.yes:after {
		font-size:10px;
		margin:0 0 0 -2px;
	}
}
@media (max-width: 480px) {
	td.yes:after {
		display:none
	}
}
@media (max-width: 480px) {
	.legend {
		flex-direction: column;
		align-items: start;
	}
	h3 {
	    font: 18px/30px var(--font);
	    padding: 0 0 0px;
	}
	h3 + p {
	    font: 300 14px/20px var(--font);
	}
}
@media (hover: none) and (max-width: 480px) {
	.cal_days {
		display: flex;
		gap:16px;
		overflow-x: scroll;
		overflow-y:hidden;
		align-items: flex-start;
		scroll-snap-type: x mandatory;
		scroll-snap-stop: normal;
		margin:0 -20px;
		padding:0 20px;
	}
	.cal_days::-webkit-scrollbar:horizontal {
		height: 0;
	}
	.cal_day {
		min-width: calc(100vw - 60px);
		box-sizing: border-box;
		scroll-snap-align: center;
		
	}
	.locations {
		scroll-snap-type: x mandatory;
		scroll-snap-stop: normal;
		margin:0 -20px 20px;
		padding:0 20px;
		flex-direction:row;
		overflow-x: scroll;
		overflow-y:hidden;
		flex-wrap: nowrap
	}
	.location {
		min-width: calc(100vw - 60px);
		box-sizing: border-box;
		scroll-snap-align: center;
	}
	.locations::-webkit-scrollbar:horizontal {
		height: 0;
	}
}
@media (max-width: 480px) {
	.legend {
		flex-direction: column;
		align-items: start;
	}
	h3 {
	    font: 18px/30px var(--font);
	    padding: 0 0 0px;
	}
	h3 + p {
	    font: 300 14px/20px var(--font);
	}
}
@media (min-width: 2600px) {
	table .col-mob {
		display: none;
	}
}
@media (max-width: 640px) {

	thead tr:first-child th.col-mob span {
		margin:34px -34px;
		transform:rotate(90deg);
		display: inline-block;
	}
}
@media (max-width: 2600px) {
	table .col:not(.col-mob):not(.col-active) {
		display: none;
	}
	table .col-mob {
		cursor: pointer
	}
	table .col-mob.col-active {
		display: none;
	}
	thead tr:first-child th.col-mob span {
		line-height: 18px;
	}
	thead tr:first-child th.col-mob span i {
		font: 300 14px/20px var(--font);
	}
	thead tr:first-child th.col-mob span b {
		font-weight:500
	}
	thead th.col-active {
		background:#d5e4ef
		
	}
	thead th.col svg {
		width:16px;
		height:16px;
		transform:rotate(90deg);
		border-radius:4px;
		background:#d5e4ef;
		fill:#104f95;
		margin:2px;
		
	}
	thead tr:first-child th.col-active {
		background:#cbd9e3;
		background:#d5e4ef;
		font-weight:500		
	}
	thead tr:first-child th.col-active:not(.col-mobile):after {
		content: attr(data-more);
	    font:400 12px/16px var(--font);
		display: block;
		white-space:wrap;
		margin:4px 0 0 0;
		opacity:0.7
	}
	tbody td.col-active:not(.yes) {
		background:#d5e4ef
		
	}
	table.tbl-active .col:not(.col-active) {
	}
}

.slider {
	background: #fff;
	display: flex;
	width:320px;
	height:40px;
	margin:0 auto 32px;
	border-radius:20px;
	align-items: center;
	justify-content: space-evenly;
	padding: 2px;
	overflow:hidden
}

.slider a {
	display: flex;
	height:40px;
	align-items: center;
	justify-content: center;
	color: #000;
	flex-grow:1;
	cursor:pointer
}

.slider a:hover {
	text-decoration:underline
}

.slider a.act {
    background: #BAE024;
    color:#0C2139;
    pointer-events:none;
    box-shadow: 5px 5px 5px #0003 inset;
	border-radius:20px;
}