/**
 * SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 * SPDX-FileCopyrightText: 2023 Oriol Carbonell <info@oriolcarbonell.cat>
 * SPDX-License-Identifier: AGPL-3.0-only
 */
@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Bold'), local('MabryPro-Bold'), url('fonts/MabryPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Medium'), local('MabryPro-Medium'), url('fonts/MabryPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Black'), local('MabryPro-Black'), url('fonts/MabryPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Light Italic'), local('MabryPro-LightItalic'), url('fonts/MabryPro-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Bold Italic'), local('MabryPro-BoldItalic'), url('fonts/MabryPro-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Light'), local('MabryPro-Light'), url('fonts/MabryPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Black Italic'), local('MabryPro-BlackItalic'), url('fonts/MabryPro-BlackItalic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Medium Italic'), local('MabryPro-MediumItalic'), url('fonts/MabryPro-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro Italic'), local('MabryPro-Italic'), url('fonts/MabryPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Mabry Pro';
    src: local('Mabry Pro'), local('MabryPro-Regular'), url('fonts/MabryPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'weathericons';
    src: url('fonts/weathericons.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: inherit;
}

* {
    margin: 0;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    --contrast: #303334;
    --contrast-2: #5f6158;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #00aa7d;
    --accent-2: #FFE37F;
    --accent-3: #9adff4;
    --error: #876e1d;
    --clar-rgb: 239, 237, 236;
    --clar: rgb(var(--clar-rgb));
}

body {
    font-family: 'Mabry Pro', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    background-color: var(--clar);
    color: var(--contrast);
    max-width: 200rem;
    margin-left: auto;
    margin-right: auto;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p + p, dl + p {
    margin-top: 1.5em;
}

dialog:modal {
    margin: auto;
}

h2 {
    font-size: 4.2rem;
    font-weight: 400;
}

a {
    color: var(--contrast);
    text-decoration: none;
}

address {
    font-style: normal;
}

body > a[href="#content"], .sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

body > a[href="#content"]:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

body > header {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 1rem 2.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: space-between;
}

body > header > address {
    margin: 0 0 1em;
    display: flex;
    gap: 2em;
}

body > header > address, nav:first-of-type a {
    font-size: 1.3rem;
}

nav:first-of-type .has-submenu > a {
    line-height: 1.2;
}

nav:first-of-type .has-submenu > a::after {
    top: .5rem;
}

nav:first-of-type .has-submenu ul {
    top: 2rem;
}

body > header > address a {
    display: flex;
    gap: .5em;
}

body > header > address a::before {
    display: inline-block;
    width: 1.2rem;
    aspect-ratio: 1;
    content: '';
    background: left center / 100% no-repeat;
}

body > header > address a[href^='tel:']::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M164.39,145.34a8,8,0,0,1,7.59-.69l47.16,21.13a8,8,0,0,1,4.8,8.3A48.33,48.33,0,0,1,176,216,136,136,0,0,1,40,80,48.33,48.33,0,0,1,81.92,32.06a8,8,0,0,1,8.3,4.8l21.13,47.2a8,8,0,0,1-.66,7.53L89.32,117a7.93,7.93,0,0,0-.54,7.81c8.27,16.93,25.77,34.22,42.75,42.41a7.92,7.92,0,0,0,7.83-.59Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}

body > header > address a[href^='mailto:']::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="224 56 128 144 32 56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cpath d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="110.55" y1="128" x2="34.47" y2="197.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="221.53" y1="197.74" x2="145.45" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}

body > header, nav .has-submenu ul {
    background-color: rgba(var(--clar-rgb), 0.7);
    /* background: linear-gradient(180deg, rgba(0,170,125,0.7021009087228641) 35%, rgba(240,240,240,0.7021009087228641) 35%); */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid;
}

h1 a {
    display: flex;
    align-items: center;
}

h1 a span {
    display: inline-block;
}

h1 a .logo {
    width: 9rem;
    height: 5.1633rem;
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 209.62463 120.27728"%3E%3Cpath d="m102.10584,21.36518s15.78382,27.66469,51.74793,31.08194l-1.43503,10.41504s-7.02735,3.85898-7.51532,4.45149c-.48786.5924-17.41148,7.42712-20.34098,7.59008-2.92939.16307-13.72109.10905-14.04701-.62769-.32603-.73675-16.96005-28.72295-16.95779-32.16343,0-.18506,3.01532-26.44336,8.54819-20.74742Z" fill="%23a4c480" stroke-width="0"/%3E%3Cpath d="m154.60698,63.26961l11.07138.63548s5.45032-48.4924-22.5546-52.25112l-.18608,1.29294,10.33565,13.93141,1.24885,16.53929-.4229,16.65601.5077,3.19599Z" fill="%23969189" stroke-width="0"/%3E%3Cpath d="m59.98896,13.07467s26.34299,16.24631,33.85829,32.03453h2.18499v-9.02184l2.23121-6.99542,5.14967-9.73333,3.96251-2.62987s8.53287-9.22889,29.83861-5.08471c21.30463,4.14418,22.90476,11.23106,26.57542,23.12839,3.67064,11.8962,1.89537,28.65032,1.89537,28.65032l11.17265,3.52303s-.09146-9.67818,2.9162-17.32566c3.00766-7.64736,5.56715-24.27484,19.32456-37.32302l1.35125-1.72351L132.62842,1.12773,59.72236,10.71343l.2666,2.36124Z" fill="%23d1c7b8" stroke-width="0"/%3E%3Cpath d="m175.91826,101.64108s11.48323-14.95787,10.31478-21.95104c-1.16855-6.99328-8.30382-14.01521-16.6462-15.6803-8.34227-1.66521-11.83564,0-11.83564,0l-3.14422-.74013-.92508-5.81706-2.4041-.75986s-7.30826-1.80944-9.24761.75986c-1.93936,2.56829-10.35775,5.34352-10.35775,5.34352l-6.4734,2.03409s-6.74439,3.44048-9.43154,2.48349c-2.68716-.9571-10.13413,6.76413-10.13413,6.76413l-6.14083,7.02734-1.08375,4.51092,4.27421.72581s31.57746,3.08581,33.05873,3.08581c1.48015,0,9.98774,1.85027,9.98774,1.85027l17.20003,5.9172,12.98874,4.44596Z" fill="%23b0dbea" stroke-width="0"/%3E%3Cpath d="m96.47827,44.56732c-.00067-.0108-.00549-.10791-.00989-.27209v.49615c.00708-.07379.01459-.14758.00989-.22406Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.30634,65.09119c.3075-.00421.61816-.00604.92975-.00702h-1.00415c.0238.00128.05182.00665.0744.00702Z" fill="none" stroke-width="0"/%3E%3Cpath d="m115.49664,65.26294c3.7135-.74225,6.41833-.75543,7.27844-.73346.75879-.15302,3.80713-1.50214,4.39526-1.90857.36786-.25543.96246-.47028,2.38763-.97681,2.26318-.80286,6.04944-2.14532,8.03943-3.67395,3.02869-2.32764,11.24426-2.55499,14.82135-2.39087v-2.58807c-30.22626,0-46.91541-23.68726-50.24347-28.9433-5.68298,8.39807-5.75269,18.2829-5.70831,20.19055.00012.00391.00012.00598.00024.01001l.00116-.00195v.04871c.00439.16418.00922.26129.00989.27209.0047.07648-.00281.15027-.00989.22406v1.46252c6.60834,10.5589,10.33264,19.86877,11.60651,23.32941,2.42841-1.9151,5.34241-3.90509,7.42175-4.32037Z" fill="none" stroke-width="0"/%3E%3Cpath d="m132.65265,8.35669c10.40503.30835,18.67029,3.9845,24.56561,10.92816,13.32343,15.69019,9.93256,42.32843,9.78168,43.45618-.01428.10895-.06281.20264-.09912.30164,3.02527.51666,5.72345,1.26544,8.10999,2.22583,2.9295-30.71533,13.64392-45.85205,22.27155-53.17957L132.03918,3.1828,62.6452,12.43805c8.8457,4.99109,16.0592,11.3692,21.73309,17.66266,3.46472,3.84235,6.51636,7.82147,9.19141,11.72217.24237-5.02301,1.72693-15.47211,9.44702-23.44989,6.79944-7.02747,16.76282-10.38971,29.63593-10.0163Z" fill="none" stroke-width="0"/%3E%3Cpath d="m133.47638,11.40063c-.08368-.01318-.14539-.05841-.22137-.08423-.23016-.0105-.45697-.02808-.68939-.03473-11.99207-.35455-21.22534,2.70929-27.42676,9.10553-.39752.40967-.76978.8299-1.13098,1.25439.17615.31549,16.2937,28.53033,48.41089,28.53033v-14.09778c0-.94934,1.03522-21.547-18.94238-24.67352Z" fill="none" stroke-width="0"/%3E%3Cpath d="m154.98254,21.17133c-1.96252-2.30884-4.22461-4.21466-6.77295-5.72064,8.00757,8.26025,7.52295,20.52759,7.51306,20.69946l.01544,26.00714c2.99548.00995,5.78503.17841,8.38086.48676-.00665-.09686-.03308-.19049-.0199-.29187.03534-.26318,3.36334-26.4939-9.11652-41.18085Z" fill="none" stroke-width="0"/%3E%3Cpath d="m183.75952,77.11957c-3.5838-9.8241-17.01001-12.02271-28.15991-12.0354h-.36353c-.31158.00098-.62225.00281-.92975.00702-.02258-.00037-.0506-.00574-.0744-.00702h-1.80408v-1.41315c-.00098-.01465-.00909-.02875-.00909-.04346v-5.13818c-2.9162-.14581-10.83899.11072-13.03827,1.80005-2.35785,1.81061-6.26093,3.19598-8.84454,4.1123-.72913.25995-1.55731.55292-1.75543.65973-.59039.41296-4.73785,2.38647-6.00653,2.39526-.48462-.01428-3.07263-.0495-6.70471.67621-2.3855.47467-7.6496,4.77966-10.40625,7.38086-.03741.03534-.08478.04852-.12439.07941-.00665.00439-.00879.01208-.01428.01758-2.12769,1.82922-6.09137,6.28394-4.89752,8.48328,20.75946.42627,38.3407,3.65741,52.23682,7.55597,8.48883,2.38214,16.07678,5.13208,22.72418,7.93823.00555-.00555.00665-.01208.01105-.0166.11902-.12225,11.84332-12.35651,8.16064-22.45209Z" fill="none" stroke-width="0"/%3E%3Cpath d="m186.50177,76.11511c-1.48676-4.07471-4.45374-7.2829-8.77844-9.59448.08252-.16187.13867-.34137.15631-.53412,4.67511-50.57495,31.40466-57.5484,31.745-57.63098l-.65973-2.8512c-.39648.09131-3.78406.94043-8.29828,4.00421-.04071-.00983-.07928-.02527-.12225-.03076L132.23956,0h-.39087L57.92072,9.98816C42.95178,2.88751,23.79694-.04852,0,7.16943l.85022,2.79944c20.75409-6.29608,39.55432-5.37756,56.20044,2.6806.1994.1861.45154.2984.72571.35022,8.73224,4.35291,16.8653,10.68378,24.36841,18.99194,15.33014,16.97485,22.53931,36.70953,23.53259,39.57513-.99554.86346-1.72021,1.53528-1.98004,1.77863-.02429.01874-.05518.02313-.07831.04401-.77417.66296-6.85333,6.06152-6.04382,10.68048-7.94147-.05725-16.32684.3017-25.13721,1.18719l-14.87634-25.76495c-.00281-.00482-.00684-.00928-.0105-.01373l-1.06238-1.83368-1.06519,1.84436c-.00024.00031-.00043.00061-.00067.00092l-.33942.58795-.0033.00568-18.06873,31.29779c-11.50208,2.81042-23.5282,6.53284-36.05109,11.37634l1.05615,2.72913c11.41272-4.41406,22.40259-7.87878,32.9563-10.57361l-7.9754,13.81415v-.00006l-.02411.04187-.77667,1.34528c-.00232.00403-.00299.00867-.00525.01276l-1.05859,1.8385h31.3595c.00793,0,.01447-.00439.0224-.00452h1.211v-47.2467l26.52234,45.93286v.00006l.74982,1.31378h.68909c.01178.00037.02307.00452.03491.00452.0116,0,.02313-.00421.03473-.00452h2.09521l-1.05756-1.83441c-.0022-.00391-.00183-.00842-.00409-.01233l-12.74426-22.07227c32.21075-3.05389,58.63867,1.0022,77.87506,6.38318,34.80206,9.73547,54.32379,25.69104,54.51648,25.85187l1.8689-2.2522c-.14313-.11786-10.64624-8.71344-29.87708-17.21222,2.73993-3.08252,11.83563-14.38074,8.07251-24.69775ZM84.3783,30.10071c-5.67389-6.29346-12.88739-12.67157-21.73309-17.66266L132.03918,3.1828l65.24316,8.90613c-8.62762,7.32751-19.34204,22.46423-22.27155,53.17957-2.38654-.96039-5.08472-1.70917-8.10999-2.22583.03632-.099.08484-.19269.09912-.30164.15088-1.12775,3.54175-27.76599-9.78168-43.45618-5.89532-6.94366-14.16058-10.61981-24.56561-10.92816-12.87311-.37341-22.83649,2.98883-29.63593,10.0163-7.72009,7.97778-9.20465,18.42688-9.44702,23.44989-2.67505-3.9007-5.72668-7.87982-9.19141-11.72217Zm79.74066,32.54333c-2.59583-.30835-5.38538-.47681-8.38086-.48676l-.01544-26.00714c.00989-.17188.49451-12.43921-7.51306-20.69946,2.54834,1.50598,4.81042,3.4118,6.77295,5.72064,12.47986,14.68695,9.15186,40.91766,9.11652,41.18085-.01318.10138.01324.19501.0199.29187Zm-11.7002-26.56989v14.09778c-32.11719,0-48.23474-28.21484-48.41089-28.53033.36121-.4245.73346-.84473,1.13098-1.25439,6.20142-6.39624,15.43469-9.46008,27.42676-9.10553.23242.00665.45923.02423.68939.03473.07599.02582.1377.07104.22137.08423,19.9776,3.12653,18.94238,23.72418,18.94238,24.67352Zm-55.95038,10.17975v-2.00739l-.00116.00195c-.00012-.00403-.00012-.0061-.00024-.01001-.04437-1.90765.02533-11.79248,5.70831-20.19055,3.32806,5.25604,20.01721,28.9433,50.24347,28.9433v2.58807c-3.57709-.16412-11.79266.06323-14.82135,2.39087-1.98999,1.52863-5.77625,2.87109-8.03943,3.67395-1.42517.50653-2.01978.72137-2.38763.97681-.58813.40643-3.63647,1.75555-4.39526,1.90857-.86011-.02197-3.56494-.00879-7.27844.73346-2.07935.41528-4.99335,2.40527-7.42175,4.32037-1.27386-3.46063-4.99817-12.77051-11.60651-23.32941Zm79.11945,53.33435c-6.6474-2.80615-14.23535-5.55609-22.72418-7.93823-13.89612-3.89856-31.47736-7.1297-52.23682-7.55597-1.19385-2.19934,2.76984-6.65405,4.89752-8.48328.00549-.00549.00763-.01318.01428-.01758.03961-.03088.08698-.04407.12439-.07941,2.75665-2.6012,8.02075-6.90619,10.40625-7.38086,3.63208-.72571,6.22009-.69049,6.70471-.67621,1.26868-.00879,5.41614-1.9823,6.00653-2.39526.19812-.10681,1.02631-.39978,1.75543-.65973,2.58362-.91632,6.48669-2.3017,8.84454-4.1123,2.19928-1.68933,10.12207-1.94586,13.03827-1.80005v5.13818c0,.01471.00812.02881.00909.04346v1.41315h3.17175c11.1499.0127,24.57611,2.2113,28.15991,12.0354,3.68268,10.09558-8.04163,22.32983-8.16064,22.45209-.00439.00452-.00549.01105-.01105.0166Z" fill="%23303334" stroke-width="0"/%3E%3C/svg%3E ') top left no-repeat;
    background-size: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 1.7rem;
}

h1 a .name {
    font-size: calc(1.5rem + .8vw);
    line-height: 1em;
    text-indent: -.4em;
    word-wrap: break-word;
    font-weight: 700;
    width: 50%;
}

#menuShowHide, label[for="menuShowHide"] {
    position: absolute;
    left: -9999em;
}

body > header nav:last-of-type {
   grid-column: span 2; 
}

nav ul, .campsite_type_features ul, .campsite_features ul, .outside_activities > ul {
    list-style: none;
    padding-left: 0;
    display: flex;
}

nav ul {
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
}

nav a, nav button, label[for="menuShowHide"] {
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0 2rem;
    line-height: 6rem;
}

nav button {
    cursor: pointer;
    background: none;
    border: none;
}

nav .has-submenu {
    position: relative;
}

nav .has-submenu > a::after, nav .has-submenu > button::after {
    content: "↓";
    position: absolute;
    right: -0.05rem;
}

nav .has-submenu ul {
    flex-direction: column;
    align-items: start;
    display: none;
    position: absolute;
    top: 5rem;
}

nav .has-submenu ul a {
    line-height: 4rem;
    white-space: nowrap;
}

nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
    display: flex;
}

nav:last-of-type > ul > li:last-child {
    display: none;
}

.boto-reserva a {
    padding-top: 3px;
}

.boto-reserva {
    border: 2px solid;
    border-radius: .6rem;
    height: 4rem;
    display: flex;
    align-items: center;
    margin-bottom: 3px;
    transition: 0.5s ease;
}

.boto-reserva:hover {
    background: var(--accent);
    transition: 0.5s ease;
}

@media (max-width: 32rem) {
    body > header > address {
        flex-direction: column;
        gap: 1rem;
    }
}


@media (max-width: 80rem) {
    body > header {
        position: unset;
        grid-template-columns: 1fr auto;
    }

    label[for="menuShowHide"] {
        position: static;
        cursor: pointer;
        justify-self: end;
    }

    label[for="menuShowHide"]::before {
        content: "\2630";
        margin-right: .20em;
    }

    nav:last-of-type {
        display: none;
        grid-column: 1 / span 2;
    }

    #menuShowHide:checked ~ nav {
        display: block;
    }

    #menuShowHide:checked ~ label[for="menuShowHide"]::before {
        content: "✕";
    }

    nav:last-of-type ul {
        flex-direction: column;
        align-items: start;
    }

    nav:last-of-type li {
        width: 100%;
    }

    nav:last-of-type a, nav:last-of-type button {
        width: 100%;
        height: 100%;
        display: block;
        text-align: left;
    }

    .boto-reserva {
        height: unset;
    }

    nav:last-of-type .has-submenu ul {
        position: static;
        padding-left: 2rem;
        margin-top: -1rem;
        background: none;
    }

    nav:last-of-type > ul > li:last-child {
        display: unset;
    }

    nav:first-of-type {
        display: none;
    }
}

#content {
    padding: 2.5rem;
}

.hero .slick-slide, .nature section a {
    background: var(--background-image) center center no-repeat;
    background-size: cover;
}

.hero {
    position: relative;
    margin-bottom: 5rem;
}

.nature, .services {
    margin-bottom: 5rem;
}

.hero .slick-slide, .nature section, .services {
    border-radius: .6rem;
}

.hero .slick-initialized .slick-slide {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 5rem;
    padding: 5rem;
    height: 65vh;
}

.services {
    min-height: 8rem;
    display: flex;
    align-items: flex-end;
    gap: 5rem;
    padding: 5rem;
}

.hero .slick-slide span, .hero a, .services h2, .surroundings .spiel a {
    font-weight: bold;
    line-height: .9em;
}

.hero .slick-slide span, .hero a {
    border-radius: .6rem;
    background-color: var(--clar);
}

.hero .slick-slide > span {
    width: 50%;
    margin-bottom: 0;
    font-size: calc(2rem + 2.7vw);
    display: block;
    background: transparent;
    color: var(--base);
}

.hero a, .services h2, .surroundings .spiel a {
    font-size: calc(2rem + 1.2vw);
}

.hero a, .services a {
    padding: 1.5rem 2rem;
}

.hero a span, .services a span, .surroundings .spiel a:hover span, .campsite_type_booking button span {
    display: inline-block;
    transition: transform 0.5s ease;
}

.hero a {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.hero a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking button:hover span {
    transform: translateX(1.3rem);
}

@media (max-width: 48rem) {
    .hero .slick-initialized .slick-slide {
        padding-bottom: 9rem;
    }

    .hero .slick-slide span {
        width: 100%;
    }
}

dl, .nature > div, .outside_activities > div, .campsite_info {
    display: flex;
    gap: 5rem;
}

.nature section {
    flex: 1;
}

.nature section h3 {
    font-size: 2.4rem;
}

.nature section a {
    display: block;
    width: 100%;
    height: 20rem;
    border-radius: .6rem;
}

.nature section a span {
    z-index: 2;
    padding: .55rem 1.5rem 1rem;
    background-color: var(--accent);
    color: var(--base);
    border-top-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}

/* graella allotjaments portada */

.nature > div {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
}

.nature section:nth-child(2n + 1) {
    grid-area: 1 / 1 / 2 / 5;
}

.nature section:nth-child(2n + 2) {
    grid-area: 1 / 5 / 2 / 9;
}

.nature section:nth-child(2n + 3) {
    grid-area: 1 / 9 / 2 / 13;
}

.nature section:nth-child(2n + 4) {
    grid-area: 2 / 1 / 3 / 4;
}

.nature section:nth-child(2n + 5) {
    grid-area: 2 / 4 / 3 / 7;
}

.nature section:nth-child(2n + 6) {
    grid-area: 2 / 7 / 3 / 10;
}

.nature section:nth-child(2n + 7) {
    grid-area: 2 / 10 / 3 / 13;
}

@media (max-width: 64rem) {
    .nature > div {
        display: flex;
        flex-direction: column;
    }
}

/* fi graella */

.services {
    justify-content: end;
    background-color: var(--accent);
}

.campsite_services, .campsite.carousel {
    margin: 0 0 4rem 0;
}

.carousel {
    display: none;
    overflow: hidden;
}

.carousel .spiel {
    font-size: 1.8rem;
}

.carousel .spiel p {
    margin-top: 0;
    margin-bottom: 2rem;
}

.carousel .slick-slide {
    margin-right: 5rem;
    position: relative;
}

.carousel img {
    height: 30rem;
    width: 100%;
    border-radius: .6rem;
    object-fit: cover;
}

.carousel figcaption {
    padding: 10px 15px;
    background: var(--clar);
    width: fit-content;
    float: right;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: .6rem;
    font-size: 1.7rem;
}

.carousel .slick-list {
    margin-right: -5rem;
}

.slick-slider .slick-arrow {
    font-weight: 600;
    font-size: calc(2rem + 1.2vw);
    line-height: 1;
    width: 5rem;
    height: 5rem;
    border: none !important;
    background: var(--base);
    cursor: pointer;
    transition: padding 0.5s ease;
    position: absolute;
    top: 1rem;
    z-index: 1;
}


@media (max-width: 48rem) {

    .campsite_type_title {
        padding-bottom: 6rem;
    }

    .carousel {
        overflow: unset;
    }

    .carousel .slick-arrow {
        background: var(--accent);
        margin-top: -6rem;
        margin-right: -1rem;
    }

    .carousel .slick-list {
        padding-top: 2rem;
    }

    .carousel .slick-list,
    .carousel .slick-slide {
        margin-right: 0;
    }
}

.slick-slider .slick-prev {
    right: 6rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.slick-slider .slick-prev:hover {
    padding-right: 1.3rem;
}

.slick-slider .slick-next {
    right: 1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.slick-slider .slick-next:hover {
    padding-left: 1.3rem;
}

.enjoy {
    font-weight: 900;
    font-size: calc(2rem + 4vw);
    line-height: 1.2em;
    margin: 10rem 0;
}

dl {
    flex-wrap: wrap;
}

dl div {
    flex-basis: calc(25% - 5rem + 5rem / 4);
    min-height: 220px;
    padding: 12.5px;
    border-radius: .6rem;
    transition: all 0.5s ease;
}

dl div:hover {
    background-color: var(--accent-2);
}

dt {
    font-size: 2rem;
    font-weight: 600;
    padding: 5rem 0 .5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid black;
    background-size: 2em 2em;
    background-repeat: no-repeat;
    background-position: top left;
}

@media (max-width: 48rem) {
    dl {
        flex-direction: column;
    }

    del div {
        flex-basis: 100%;
    }
}

.outside_activities {
    margin-top: 2rem;
}

.outside_activities img {
    border-radius: .6rem;
}

.outside_activities h3, .campsite_services .spiel {
    font-size: calc(2.2rem + 4vw);
    font-weight: 600;
    line-height: .9em;
}

.outside_activities h3 {
    margin-bottom: 10rem;
}

.outside_activities > ul {
    max-width: 108rem;
    margin: 0 auto;
    flex-direction: column;
    gap: 5rem;
}

.outside_activities article {
    display: flex;
    gap: 5.5%;
    justify-content: space-between;
}

.outside_activities > ul > li:nth-child(2n) article {
    flex-direction: row-reverse;
    text-align: right;
}

.outside_activities article h4 {
    font-size: 2.3rem;
}

.outside_activities article > div {
    width: 29.5%;
}

.outside_activities article > img {
    width: 64%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

@media (max-width: 64rem) {
    .outside_activities h3 {
        margin-bottom: 5rem;
    }

    .outside_activities > ul {
        gap: 5rem;
    }

    .outside_activities article, .outside_activities > ul > li:nth-child(2n) article, .campsite_info {
        flex-direction: column;
        gap: 1rem;
        text-align: left;
    }

    .campsite_info > * {
        flex: auto;
    }

    .outside_activities article > div, .outside_activities article > img {
        width: 100%;
    }
}


.campsite_activities {
    margin-top: 10rem;
    padding-top: 10rem;
    border-top: 1px solid black;
}

.campsite_activities h3 {
    font-size: 2.9rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 5rem;
}

.campsite_services.carousel .slick-track {
    align-items: center;
}

.campsite_type.carousel .spiel h3 {
    font-size: calc(1.8rem + 1.7vw);
    font-weight: 700;
}

.campsite_type_title {
    font-size: 3.6rem;
}

.campsite_type_booking {
    margin-top: 5rem;
    display: flex;
    gap: 5rem;
}

.campsite_type_booking fieldset {
    flex: 1;
}

.campsite_type_booking footer {
    flex: .5;
}

.campsite_type_booking {
    background-color: var(--accent);
    padding: 2rem;
}

.campsite_type_booking fieldset {
    display: flex;
    gap: 2.5rem;
    padding: 0;
    border: none;
}

.campsite_type_booking label {
    flex: 1;
    font-size: 2rem;
}

.campsite_type_booking input {
    padding: 1.5rem .5rem;
    width: 100%;
    background-color: var(--base);
}

.campsite_type_booking footer {
    margin-top: 2rem;
    text-align: right;
}

.campsite_type_booking button {
    background-color: var(--clar);
    padding: 1.5rem 2rem;
    cursor: pointer;
    font-size: calc(1.8rem + .8vw);
    font-weight: 600;
    line-height: 0.9em;
}

.campsite_type_booking,
.campsite_type_booking button,
.campsite_type_booking input {
    border: none;
    border-radius: .6rem;
}

@media (max-width: 48rem) {
    .campsite_type_booking,
    .campsite_type_booking fieldset {
        flex-direction: column;
    }

    .campsite_type_booking footer {
        margin-top: 0;
    }
}


.campsite_type_calendar_prices {
    display: flex;
    flex-direction: row-reverse;
}

@media (max-width: 48rem) {
    .campsite_type_calendar_prices {
        flex-direction: column;
    }
}

.campsite_type_prices {
    padding: 2.5rem 2.5rem 2.5rem 0;
    border-radius: .6rem;
    flex: .5;
}

.campsite_type_prices dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-bottom: 1px solid black;
}

.campsite_type_prices dl div:hover {
    background-color: transparent;
}

.campsite_type_prices div {
    flex-basis: unset;
    min-height: 0;
    padding: 0;
}

.campsite_type_prices dt {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-top: 1px solid black;
    border-bottom: none;
    padding: .5em 0 0;
    cursor: pointer;
    position: relative;
}

.campsite_type_prices dt::after {
    position: absolute;
    right: 0;
    top: 50%;
    content: '+';
    width: 1em;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    color: white;
    border-radius: 50%;
    line-height: 0;
}

.campsite_type_prices dt.open::after {
    content: '-';
}

.campsite_type_prices dd {
    padding: 0 0 0 calc(30px + 1.5rem);
}

.campsite_type_prices .pets_warning {
    display: flex;
    align-items: center;
    min-height: 4.8rem;
    padding-left: 5.8rem;
    background-size: 4.8rem;
    background-repeat: no-repeat;
    background-position: left center;
}

.campsite_type_calendar {
    padding: 2.5rem 0;
    min-width: 0;
    flex: 1;
}

body > footer > div, .campsite_type_features, .campsite_type_detail {
    padding: 5rem 0;
}

.campsite_type_features li, .campsite_features li {
    text-align: center;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-position: top center;
}

.campsite_type_features li {
    flex: 1;
    font-size: 2.4rem;
    background-size: 7.2rem 7.2rem;
    padding-top: 7.2rem;
}

.campsite_type_features ul {
    gap: 2.5rem;
}

.campsite_type_detail {
    display: flex;
    gap: 5rem;
    padding-bottom: 2.5rem;
}

.campsite_type_detail section {
    flex: 1;
}

.campsite_type_detail section:last-child {
    flex: 1;
}

.campsite_type_detail h4 {
    font-size: 2.4rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.campsite_type_detail ul + h4 {
    margin-top: 2.5rem;
}

@media (max-width: 64rem) {
    .campsite_type_features ul, .campsite_type_detail {
        flex-wrap: wrap;
    }

    .campsite_type_features li {
        flex: unset;
        width: calc((100% - 2.5rem * 2) / 3);
    }

    .campsite_type_detail section {
        flex: unset;
        width: calc((100% - 5rem) / 2);
    }

    .campsite_type_detail section:last-child {
        width: 100%;
    }
}

@media (max-width: 48rem) {
    .campsite_type_features ul, .campsite_type_detail {
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .campsite_type_features li, .campsite_type_detail section {
        width: 100%;
    }
}

.campsite_type_calendar button {
    display: flex;
    gap: 1em;
    font-size: 2.5rem;
    border: none;
    cursor: pointer;
}

.campsite_type_calendar form button:first-child, .campsite_type_calendar > header button {
    min-width: 0;
}

.campsite_type_calendar > header {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    align-items: center;
}

.campsite_type_calendar > header button:first-of-type::before {
    content: "←";
}

.campsite_type_calendar > header button:last-of-type::before {
    content: "→";
}

.campsite_type_calendar > div {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scroll-snap-type: x proximity;
}

.campsite_type_calendar table {
    border-collapse: collapse;
    flex: 0 0 27rem;
    height: 100%;
    scroll-snap-align: center start;
}

.campsite_type_calendar td {
    width: calc(100% / 7);
}

.campsite_type_calendar time {
    --aa-brightness: calc(((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000);
    --aa-color: calc((var(--aa-brightness) - 128) * -1000);
    background: rgb(var(--red), var(--green), var(--blue));
    color: rgb(var(--aa-color), var(--aa-color), var(--aa-color));
    display: flex;
    width: 100%;
    min-width: 3rem;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
}

.campsite_type_calendar [aria-checked] {
    border: 2px solid var(--camper--color--black);
    position: relative;
}

.campsite_type_calendar [aria-checked]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    background-color: var(--camper--color--black);
    border-radius: 50%;
    width: .8rem;
    height: .8rem;
}

.campsite_info > * {
    flex: 1;
}

.campsite_features {
    display: flex;
    justify-content: center;
    align-items: center;
}

.campsite_features ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 5rem;
}

.campsite_features li {
    background-size: 3.6rem 3.6rem;
    padding-top: 3.6rem;
}

.checkin-checkout {
    flex-direction: column;
    gap: 0;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.checkin-checkout div {
    min-height: 0;
    flex-basis: 100%;
    padding: .75rem 2rem;
    display: flex;
    gap: .25em;
    border: 2px solid #383127;
    border-radius: 0;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 3.2rem;
}

.checkin-checkout div:first-child {
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
}

.checkin-checkout div:last-child {
    border-bottom-left-radius: .6rem;
    border-bottom-right-radius: .6rem;
}

.checkin-checkout div:hover {
    background-color: initial;
}

.checkin-checkout div:last-child, .checkin-checkout div:last-child:hover {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath transform="translate(0 256) scale(1 -1)" d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
    background-color: #383127;
    color: white;
}

.checkin-checkout div:first-child {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M30.93,198.72C47.39,181.19,90.6,144,152,144v48l80-80L152,32V80C99.2,80,31.51,130.45,24,195.54A4,4,0,0,0,30.93,198.72Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
}

.checkin-checkout dt {
    padding: 0 0 0 3.2rem;
    margin: 0;
    font-size: inherit;
    font-weight: normal;
    border-bottom: none;
}

.checkin-checkout dt:after {
    content: ":";
}

/* form */

input {
    height: 60px;
    border-radius: .6rem;
    border: 1px solid;
}

select {
    min-height: 60px;
    border-radius: .6rem;
    border: 1px solid;
    background: white;
    padding: 20px;
}

fieldset {
    display: flex;
    justify-content: space-between;
}


button {
    font-size: 4rem;
    background: var(--accent);
    border-radius: .6rem;
    border: 1px solid var(--accent);
    color: var(--contrast);
}

button[disabled] {
    background-color: var(--contrast-3);
    border-color: var(--contrast-3);
}

.error {
    color: var(--error);
}

.warning {
    color: var(--error);
}

input[aria-invalid="true"] {
    border-color: var(--error);
}

div[role="alert"] {
    padding: 1em;
    margin: 1em 0 2em;
}

.error[role="alert"] {
    background-color: #fae0e3;
}

.warning[role="alert"] {
    background-color: #faf4e0;
}

/* radio buttins + checkbox */

/* Context for relative positioning */
label {
    position: relative;
}

/* Base styles for both types of inputs */
input[type="radio"],
input[type="checkbox"] {
    appearance: none;
    background: #fff;
    border: 2px solid #777;
    height: 1.5em !important;
    width: 1.5em !important;
    margin-right: .625em;
    border-radius: 100%;
    vertical-align: text-bottom;
    position: relative;
}

/* Remove the circular shape from checkboxes */
input[type="checkbox"] {
    border-radius: 0;
}

/* Styles for the pseudo-elements */
input[type="radio"]::before,
input[type="checkbox"]::before {
    content: "";
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    top: 0;
}

/* Center of the checked radio button */
input[type="radio"]:checked::before {
    border: 5px solid transparent;
    border-radius: 100%;
    background: var(--accent);
    margin: 4px;
}

/* The checkmark shape */
input[type="checkbox"]:checked::before {
    border-right: 5px solid var(--accent);
    border-bottom: 6px solid var(--accent);
    height: 90%;
    width: 50%;
    transform: rotate(50deg) translateY(-20%) translateX(-10%);
}

/* Some focus styles for accessibility */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    outline-offset: 2px;
}

#booking {
    display: flex;
    align-items: start;
    gap: 4rem;
}

#booking fieldset {
    padding: 0;
}

#booking > fieldset {
    flex: 1;
}

#booking > footer {
    flex: .33;
    position: sticky;
    top: 13rem;
}

#booking > footer fieldset {
    flex-direction: column;
    gap: 1em;
    margin: 1em 0;
}

#booking br {
    display: none;
}

#booking fieldset {
    border: none;
}

#booking > fieldset {
    display: revert;
}

#booking legend {
    font-weight: bold;
}

#booking input:not([type="radio"]):not([type="checkbox"]),
#booking select {
    width: 100%;
    padding: 20px;
}

#booking > fieldset > fieldset {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 3px solid black;
}

#booking > fieldset > fieldset:last-of-type {
    border-bottom: none;
}

#booking .accommodation,
#booking .customer-details,
#booking .booking-period {
    display: grid;
    gap: 1em;
}

#booking .accommodation {
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
}

#booking .accommodation label {
    white-space: nowrap;
}

#booking .customer-details {
    grid-template-columns: repeat(3, 1fr);
}

#booking .customer-details .full-row {
    grid-column: span 3;
}

#booking .campsite-options {
    flex-direction: column;
}

#booking .campsite-options label {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin: 1rem 0 0 0;
}

#booking .campsite-options label span a {
    display: block;
}

#booking .campsite-options input[type="number"] {
    width: 8em;
}

#booking .booking-period {
    grid-template-columns: repeat(2, 1fr);
}

#booking a, .outside_activities a {
    color: var(--accent);
    text-decoration: var(--accent) wavy underline;
}

#booking footer p + p {
    margin: .75em 0;
}

/*<editor-fold desc="booking cart">*/

#booking .cart {
    flex-direction: column;
    gap: .5rem;
}

#booking .cart div {
    flex: 1;
    min-height: unset;
    display: flex;
    gap: .5rem;
    padding: 0;
    justify-content: space-between;
}

#booking .cart div:hover {
    background: none;
}

#booking .cart dt {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

#booking .cart .total {
    font-weight: bold;
}

/*</editor-fold>*/

@media (max-width: 48rem) {
    #booking {
        flex-direction: column;
        align-items: stretch;
    }

    #booking > fieldset > fieldset:not(.accommodation) {
        grid-template-columns: 1fr !important;
    }

    #booking .customer-details .full-row {
        grid-column: span 1;
    }

    #booking > footer {
        position: unset;
    }
}

/* booking card */

.credit-cards {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 30px 10px;
}

.credit-cards svg {
    width: 4.8rem;
}

dl.payment-details div {
    flex-basis: unset;
    min-height: unset;
    padding: unset;
}

dl.payment-details dt {
    padding: unset;
}

body > footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 12rem 2rem 0 2rem;
    background: var(--contrast);
    color: var(--base);
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
}

body > footer a {
    color: var(--base);
}

/* highlight footer season */
body > footer section:nth-child(3) {
    border-radius: .6rem;
    background: var(--accent-2);
    padding: 0 1rem 1rem 1rem;
    color: var(--contrast);
}

body > footer section:nth-child(3) h2 {
    border-bottom: 1px solid var(--contrast);
}

body > footer section:nth-child(3) p {
    padding-left: 15px;
}

body > footer > div {
    display: flex;
    gap: 3rem;
    justify-content: space-between;
    margin: 0 2.5rem;
    border-bottom: 1px solid var(--base);
}

body > footer section {
    width: 25%;
}

body > footer h2 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--base);
}

body > footer ul {
    list-style: none;
    padding: 0;
}

body > footer li a::before {
    font-size: 1.25em;
    content: "→";
    display: inline-block;
    margin-right: .5em;
    transition: transform .5s ease;
}

body > footer li a:hover::before {
    transform: translateX(.6rem);
}

body > footer span {
    font-size: 1.5rem;
    text-align: center;
    padding: 2.5rem;
    display: block;
}

.camping-association {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 5rem;
    gap: 2rem;
    margin: 2rem 0 0;

}

.camping-association img {
    max-height: 35px;
}

/*<editor-fold desc="footer responsive">*/

@media (max-width: 64rem) {
    body > footer div {
        flex-direction: column;
    }

    body > footer section {
        width: 100%;
        margin: 4rem 0 0 0;
    }

}

/*</editor-fold>*/


/* contact */

@media (max-width: 64rem) {
    .contact-page {
        grid-template-columns: 1fr !important;
    }
}

.contact-page {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;
}

address {
    font-size: calc(16px + .4vw);
    margin: 30px 0 30px 0;
}

#map {
    border-radius: .6rem;
}

.leaflet-popup-content-wrapper {
    border-radius: 5px !important;
}

.leaflet-popup-content {
    font-size: 2rem !important;
}

/* campground page */

.map-legend {
    display: flex;
    gap: 5rem;
}

#campground_map {
    width: 80vw;
    height: 75vh;
    border-radius: .6rem;
    font-size: 1.2rem;
}

#arbres {
    mix-blend-mode: multiply;
    opacity: .5;
}

#zones {
    mix-blend-mode: multiply;
    opacity: 0;
}

.legend-directory {
    width: 20vw;
    height: 75vh;
    background: #fff;
    border-radius: .6rem;
    padding: 1rem 2rem;
    overflow: scroll;
}

.legend-directory h4 {
    border-bottom: solid 1px;
    margin: 1rem 0;
}

.legend-directory ul {
    padding-left: 0;
    list-style: none;
}

.legend-directory li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--contrast);
    margin: 1rem;
}

.legend-directory svg {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    fill: var(--contrast);
}

@media (max-width: 64rem) {
    .map-legend {
        display: flex;
        flex-direction: column;
    }

    #campground_map {
        width: 100%;
    }

    .legend-directory {
        width: 100%;
    }
}


/* surrounding */

#surroundings-ad {
    display: flex;
    margin: 5rem 0;
    border-radius: .6rem;
    overflow: hidden;
    background-color: var(--accent-2);
}

#surroundings-ad::before {
    content: '';
    background: var(--background-image) center center no-repeat;
    background-size: cover;
    min-height: 30rem;
}

#surroundings-ad::before, #surroundings-ad > div {
    flex: 1;
}

#surroundings-ad > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem;
}

#surroundings-ad h3 {
    font-size: calc(1.6rem + .7vw);
    font-weight: 400;
    margin-bottom: 2.585rem;
}

#surroundings-ad a {
    font-size: calc(1.8rem + 1.7vw);
    font-weight: 600;
    line-height: 0.9em;
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    color: var(--contrast);
}

#surroundings-ad svg {
    width: 4rem;
    transform: rotate(320deg) translate3d(-5px, -10px, 0);
    transition: transform 0.5s ease;
}

#surroundings-ad a:hover svg {
    transform: rotate(320deg) translate3d(10px, 0, 0);
}

@media (max-width: 48rem) {
    #surroundings-ad {
        flex-direction: column-reverse;
    }

    #surroundings-ad > div {
        justify-content: start;
    }
}

/* services */

.services_icon {
    position: relative;
    z-index: 2;
}

dt {
    position: relative;
    z-index: 3;
}

.services_icon::before {
    content: '';
    background: var(--accent-2);
    position: absolute;
    width: 60px;
    height: 60px;
    top: 2px;
    left: 2px;
    border-radius: 50px;
    z-index: 1;
}

.services_icon a {
    color: var(--accent);
    text-decoration: var(--accent) wavy underline;
}

.weather-forecast {
    display: inline-grid;
    column-gap: 2ex;
    row-gap: 0;
    grid-template-columns: auto auto;
    justify-content: end;
    align-items: center;
}

.weather-forecast span, .weather-forecast time {
    line-height: 1;
}

.weather-forecast span {
    font-size: .95em;
}

.weather-forecast time {
    font-size: .6em;
    text-transform: uppercase;
}

.weather-forecast::before {
    display: inline-block;
    font-family: "weathericons" !important;
    font-size: 1.6em;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '';
    grid-row: 1 / 3;
}

.weather-forecast.condition-200:before {
    content: "";
}

.weather-forecast.condition-201:before {
    content: "";
}

.weather-forecast.condition-202:before {
    content: "";
}

.weather-forecast.condition-210:before {
    content: "";
}

.weather-forecast.condition-211:before {
    content: "";
}

.weather-forecast.condition-212:before {
    content: "";
}

.weather-forecast.condition-221:before {
    content: "";
}

.weather-forecast.condition-230:before {
    content: "";
}

.weather-forecast.condition-231:before {
    content: "";
}

.weather-forecast.condition-232:before {
    content: "";
}

.weather-forecast.condition-300:before {
    content: "";
}

.weather-forecast.condition-301:before {
    content: "";
}

.weather-forecast.condition-302:before {
    content: "";
}

.weather-forecast.condition-310:before {
    content: "";
}

.weather-forecast.condition-311:before {
    content: "";
}

.weather-forecast.condition-312:before {
    content: "";
}

.weather-forecast.condition-313:before {
    content: "";
}

.weather-forecast.condition-314:before {
    content: "";
}

.weather-forecast.condition-321:before {
    content: "";
}

.weather-forecast.condition-500:before {
    content: "";
}

.weather-forecast.condition-501:before {
    content: "";
}

.weather-forecast.condition-502:before {
    content: "";
}

.weather-forecast.condition-503:before {
    content: "";
}

.weather-forecast.condition-504:before {
    content: "";
}

.weather-forecast.condition-511:before {
    content: "";
}

.weather-forecast.condition-520:before {
    content: "";
}

.weather-forecast.condition-521:before {
    content: "";
}

.weather-forecast.condition-522:before {
    content: "";
}

.weather-forecast.condition-531:before {
    content: "";
}

.weather-forecast.condition-600:before {
    content: "";
}

.weather-forecast.condition-601:before {
    content: "";
}

.weather-forecast.condition-602:before {
    content: "";
}

.weather-forecast.condition-611:before {
    content: "";
}

.weather-forecast.condition-612:before {
    content: "";
}

.weather-forecast.condition-615:before {
    content: "";
}

.weather-forecast.condition-616:before {
    content: "";
}

.weather-forecast.condition-620:before {
    content: "";
}

.weather-forecast.condition-621:before {
    content: "";
}

.weather-forecast.condition-622:before {
    content: "";
}

.weather-forecast.condition-701:before {
    content: "";
}

.weather-forecast.condition-711:before {
    content: "";
}

.weather-forecast.condition-721:before {
    content: "";
}

.weather-forecast.condition-731:before {
    content: "";
}

.weather-forecast.condition-741:before {
    content: "";
}

.weather-forecast.condition-761:before {
    content: "";
}

.weather-forecast.condition-762:before {
    content: "";
}

.weather-forecast.condition-771:before {
    content: "";
}

.weather-forecast.condition-781:before {
    content: "";
}

.weather-forecast.condition-800:before {
    content: "";
}

.weather-forecast.condition-801:before {
    content: "";
}

.weather-forecast.condition-802:before {
    content: "";
}

.weather-forecast.condition-803:before {
    content: "";
}

.weather-forecast.condition-804:before {
    content: "";
}

.weather-forecast.condition-900:before {
    content: "";
}

.weather-forecast.condition-901:before {
    content: "";
}

.weather-forecast.condition-902:before {
    content: "";
}

.weather-forecast.condition-903:before {
    content: "";
}

.weather-forecast.condition-904:before {
    content: "";
}

.weather-forecast.condition-905:before {
    content: "";
}

.weather-forecast.condition-906:before {
    content: "";
}

.weather-forecast.condition-957:before {
    content: "";
}


/*<editor-fold desc="redirect dialog">*/

dialog.redirect:modal {
    display: flex;
    gap: 1rem;
}

dialog.redirect::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    aspect-ratio: 1;
    border: 3px solid var(--contrast);
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: rotation linear 1s infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/*</editor-fold>*/

[x-cloak] {
    display: none !important;
}