@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSans';
    src: url('../fonts/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

 
:root {
    font-size:1.0em;
    font-family: 'OpenSans', Arial, sans-sarif;
    font-weight: normal;
    word-break: break-word;
    --def-bg:#fff;
    --def-text:hsl(90, 2%, 22%);
    --def-href: rgb(var(--col1));

    --def-green:#81bd4a;
    --def-yellow:#f9ff77;
    --def-orange:#FF8C00;
    --def-red:#D40D12;

    --def-shadow-color:#222;
    --def-menu-bg: rgba(255,255,255,.6);
    --def-menu-a-color: rgb(var(--col5));

    --col1:71, 86, 71;
    --col2:85, 90, 70;
    --col3:240, 237, 230;
    --col4:94, 83, 41;
    --col5:35, 43, 35;
   color:var(--def-text); 
}
/* 
@media (prefers-color-scheme: dark) {
    :root {
        font-size:1.0em;
        font-family: 'OpenSans', Arial, sans-sarif;
        font-weight: normal;
        word-break: break-word;
        --def-bg:#000;
        --def-text:#aaa;
        --def-href: rgb(var(--col1));
        --def-green:#81bd4a;
        --def-yellow:#f9ff77;
        --def-orange:#FF8C00;
        --def-red:#D40D12;
    
        --col1:71, 86, 71;
        --col2:85, 90, 70;
        --col5:240, 237, 230;
        --col4:94, 83, 41;
        --col3:35, 43, 35;
       color:var(--def-text); 
    }
}
   */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

* {
	box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body{
	background: var(--def-bg);
	color:var(--def-text);
	margin:0;
}
p{
    margin:1.2em 0;
    line-height: 1.6em;
}
a, .likeA{
	color: rgb(var(--col1));
    font-weight: bold;
    cursor: pointer;
    max-width: unset;
    display: inline-block;
    margin:0;
    padding-inline: .3em;
    transition: .3s;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: from-font;
}
a:hover, .likeA:hover,
a:focus, .likeA:focus{
        color: rgb(var(--col5));
	text-decoration-style: solid;
}
a:focus, button:focus, input:focus{

    outline-color: var(--def-orange);
    outline-style: auto;
    outline-offset: 2px;
}
ul{
   padding: 0; 
}
main li:not(.splide__slide){
    list-style: none;
    padding-block: .5em;
    border-bottom: 1px solid rgb(var(--col4));
}
main li:not(.splide__slide) li{
    padding-inline: 1em;
}
main li.splide__slide{
    margin: 1rem;
}
/* 
ul.splide__list[data-labels="new"]>li:not([data-label="new"]){
    display: none;
} */

.pos-fixed{position: fixed;}
.pos-sticky{position: sticky;}
.top-100{ top:100px;}
.no-disp{ display: none !important;}
.disp-il-bl{ display: inline-block;}
.disp-flex { display: flex;  justify-content: space-between;}
.flex-end { align-items: end; }
.flex-middle { align-items: center; }
.flex-stretch { align-items: stretch; }
.flex-center {justify-content: center;}
.flex-rev-direction {flex-direction: row-reverse;}
.flex-wrap {flex-wrap: wrap;}
.flex-grow1 {flex-grow: 1;}
.gap3 {gap: 2rem 3rem;}
.centerBox{	margin: 0 auto; }
.floatRight{ float: right; }
.floatLeft{ float: left; }
.contain { position: relative; overflow: hidden;}
.clear{ clear: both;}
.center{ text-align: center; }
.left{ text-align: left; }
.right{ text-align: right; }
.xbigFont{ font-size: 120%; }
.bigFont{ font-size: 110%; }
.smallFont{ font-size: 90%; }
.xsmallFont{ font-size: 80%; }
.sticky-top{ position: sticky; top:0;z-index: 3;}
.padw3pc {padding-left: 3%; padding-right: 3%;}
.padw5pc {padding-inline: max(5%, 35px);}
.padh10px {padding-top: 10px; padding-bottom: 10px;}
.padh20px {padding-top: 20px; padding-bottom: 20px;}
.mar0{margin:0;}
.marl3rem {margin-inline:3rem;}
.mart3rem {margin-top:3rem;}
.mart5rem {margin-top:5rem;}
.white {color:#fff !important;}
.rounded {border-radius: 5px;}
.rounded-big {border-radius: 20px;}
.scroll-mart60px {scroll-margin-top: 100px;}

.w20{ width: 20%;}
.w25{ width: 25%;}
.w33{ width: 33%;}
.w50{ width: 50%;}
.w66{ width: 66%;}
.h6px {height:6px;}
.maxw-300px {max-width: 300px;}
.maxw-500px {max-width: 500px;}
.maxw-800px {max-width: 800px;}
.maxw-1200px {max-width: 1200px;}
.minw-6em {min-width: 6em;}
.minw-300px {min-width: 300px;}
.blured,:popover-open::backdrop{ 
	background: var(--def-menu-bg);
}
@supports (backdrop-filter: blur(1em)){
    .blured,:popover-open::backdrop{ 
        backdrop-filter: blur(10px);
        background: var(--def-menu-bg);
    }
}

.bg-col3{
    background-color: rgb(var(--col3));
}
.border-all{border:1px solid rgb(var(--col4))}
.border-b{border-bottom:1px solid rgb(var(--col4))}
.visuallyhidden{
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}
.desktop-only-visible{
    display: initial;
}
.mobile-only-visible{
    display: none;
}
.mobile-hide{
    display: initial;
}

img{
    max-width:100%;
}
iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 315;
}
.navbar{
	background: var(--def-menu-bg);
    position: sticky;
    top:0;
    z-index: 13;
}
nav{
	transition: .3s;
}
nav ul{
	margin: 10px;
    padding:0;
}
nav ul li{
	list-style: none;
	display: inline-block;
	padding:5px;
    vertical-align: middle;
    border: 0;
}
nav ul li ul li{
	display:block;
}

nav ul li ul::before{
    content: " ";
    position: absolute;
    top: -18px;

    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}
nav ul li ul{
	background: var(--def-menu-bg);
	position: absolute;
    left: -9999em;
    margin: -5px;
    width: 0;
    z-index: 99999992;
    transition: .2s opacity;
    opacity: 0;
    transition-delay: .3s;
    display: none;
}

.navbar a{
    color: var(--def-menu-a-color);
    text-decoration: none;
    font-weight: bold;
    padding: 0 14px;
    display: inline-block;
    line-height: 70px;
}
nav li.selected ul{
    left: auto;
    top: auto;
    margin-top: 5px;
    width: auto;
    min-width: auto;
    border-radius: 3px;
    text-align: center;
    opacity: 1;
    display: block;
}

nav>ul{
    justify-content: space-evenly;
    margin:0;
    text-align: right;
    display: flex;
    flex-wrap: wrap;
}
nav ul#mainmenu_items li.menu_home{
    padding:0;
    margin: 0;
    flex-grow: 2;
    text-align: center;
}
#mainmenu_items .menu_home a{
    overflow: hidden;
}
#mainmenu_items .menu_home.sticky a{
    line-height: inherit;
}
#mainmenu_items .menu_home img{
    height: 0;
    opacity: 0;
    transition: .2s;
    margin-top:4px;
}
#mainmenu_items .menu_home .fa-home{
    font-size:inherit;
    opacity: 1;
}

#mainmenu_items .menu_home.sticky img{
    height: 70px;
    opacity: 1;
}
#mainmenu_items .menu_home.sticky .fa-home{
    font-size: 0;
    opacity: 0;
    transition: .1s;
}

header{
    max-width: 1400px;
    padding-block: 5vw;
    margin:0 auto;
    position: relative;
    overflow: hidden;
}
header h1{
    text-align: center;
    color: transparent;
    font-size: 0;
}
header h2{
    text-align: center;
    font-weight: normal;
    font-size: 3em;
    font-variant: all-small-caps;
}

main{
	width: 100%;    
    z-index: 0;
}
main *{
    z-index: auto;
    line-height: 1.3em;
}

main section{
    width:100%;
    padding:30px 3%;
/*     position: relative;
    overflow: hidden; */
}
.container{
    width: 100%;
    max-width: 1400px;
    margin:0 auto;
}
#activities div{
    max-width: 320px;
    border: 1px solid rgb(var(--col4));
    border-radius: 10% 10% 10% 20%;
    background-color: rgb(var(--col3));
    text-align: center;
    transition: .3s;
    margin-inline: 2%;
    margin-bottom: 3%;
}
#activities div a{
    display: block;
    padding: 0;
}
#activities div h3{
    font-weight: bold;
    display: inline-block;
}
#activities div.bg{
    background-color: rgb(var(--col1));
    border:0;
    border-radius: 20%;
    border-bottom-right-radius: 40%;
    width: 106%;
    max-width: 106%;
    display: block;
    margin-left: -3%;
    margin-right: -3%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    transition: .2s;
    transition-delay: .1s;
    box-shadow: 0px 2px 5px var(--def-shadow-color);
}
#activities div.bg img{
    display: block;
    filter: opacity(.5);
    transition: 1s;
}
#activities div:has(a:hover),
#activities div:has(a:target),
#activities div:has(a:focus){
    border-radius: 19px;
}
#activities a:hover div.bg,
#activities a:target div.bg,
#activities a:focus div.bg{
    border-radius: 20px;
    width:100%;
    margin-bottom:6%;
    margin-left:0;
}

#activities a:hover div.bg img,
#activities a:target div.bg img,
#activities a:focus div.bg img{
    filter: opacity(1);
}

#offer-home{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#offer-home div{
    min-width: 300px;
}
.offer {
    position: relative;
    overflow: hidden;
}

.offer h3{
    font-weight: normal;
}
.offer img{
    max-width: 120px;
    margin:20px 0;
}

#book-list>li>button{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    aspect-ratio: 20 / 29;
    position: relative;
    overflow: hidden;
    width:25%;
    min-width: 300px;
    padding: 0;
    cursor: pointer;
}

#book-list>li>button>div{
    background-color: rgba(var(--col3), 50%);
    bottom: 0;
    width: 100%;
    position: absolute;
}
#book-list button{
    border:0;
}
#book-list p.label[data-label="new"],
:popover-open p.label[data-label="new"]{
    display: block;
    background-color: rgb(var(--col5));
    padding:6px;
    color: var(--def-bg);
    font-weight: bold;
    border-radius: 2px;
    position: absolute;
    top:10px;
    right:0;
    text-align: center;
}

:popover-open p.label[data-label="new"]{
    right: auto;
    left: 0;

}
:popover-open {
    border-radius: 10px;
    padding: 0; 
    max-height: 90vh;
    max-width: min(800px, 90vw);
    box-shadow: 0 0 10px rgb(var(--col1));
}
:popover-open img{
    max-width: 100%;
    display: block;
    margin:0 auto;
}
:popover-open>button{
    position: absolute;
    right: 0;
    border-radius: 0 8px 0 8px;
    border: 1px solid #aaa;
    cursor: pointer;
}
.table .tr{
    margin-top:1px;
    border-radius: 2px;
    transition: .3s;
}
.table .tr:nth-child(odd){
    background-color: rgba(var(--col1),20%);
}
.table .tr:hover{
    font-weight: bold;
    background-color: rgba(var(--col1),40%);
}
  
footer{
    background: linear-gradient(rgb(var(--col5)), rgb(var(--col1)));
    color: #fff;
    clear: both;
}
footer a{
    background-color: rgb(var(--col3));
    border-radius: 3px;
}
footer a:hover,
footer a:focus{
    color: rgb(var(--col3));
    background-color: rgb(var(--col1));
}

footer #address_details>div{
    padding-inline:2%;
}
footer #address_details div.icon{
    padding-inline: 5%;
}

@media screen and (max-width: 1200px) {
    
    .w20{ width: 50%;}
    .w25{ width: 50%;}
    .w25:nth-of-type(3){clear: both;}
    .w33:not(.tw33){ width: 50%;}
    .w66:not(.tw66){ width: 100%;}
    .btw66, .bmw66{ width: 66%;}
    .btw100{ width: 100%;}

    .pos-fixed{position: static;}

    :popover-open{
        font-size: 90%;
    }
}
@media screen and (max-width: 800px) {
    .mobile-only-visible{
        display: inherit;
    }
    .desktop-only-visible{
        display: none !important;
    }
    .w66.tw66{width: 100%;}
    .w33{ width: 100%;}
    .btw66{ width: 100%;}
    .bmw33{ width:33%;}
    .tw50{ width: 50%;}
    .btw50{ width: 100%;}

    #mainmenu_btn{
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 60px;
    min-height: 60px;
    background: var(--def-menu-a-color);
    color: var(--def-bg);
    font-size: 22px;
    border: 0;
    z-index:22;
    }
    #mainmenu_btn:hover .fas,
    #mainmenu_btn:focus .fas{
        color: var(--hov-href);
    }
    .navbar{
        position: fixed;
        bottom:0;
        top:auto;
        width:100%;
        z-index: 21;
        padding-bottom: 60px;
    }
    .navbar ul{
        float: none;
        padding:0;
    }
    .navbar ul li{
        text-align: center;
    }
    #mainmenu_items{
        display: none;
    }
    #mainmenu_items.opened{
        display: block;
    }
    #mainmenu_items li{
        display: block;
    }
    #mainmenu_items li ul{
        display: block;
        text-align: center;
        position: static;
        margin: 0;
        height: 0;
        transition: none;
        overflow: hidden;
    }
    #mainmenu_items li.selected ul{
        height:auto;
    }

    #menuitem_lang, #menuitem_account{
        width:50%;
        float:left;
    }

    :popover-open p.label[data-label="new"]{
        position: static;
    }
    footer{
        padding-bottom:60px;
    }
}
@media screen and (max-width: 600px) {

    
    .mobile-hide{
        display: none;
    }
    .w25, .w33, .w50, .w66
    .tw50, .bmw66, .bmw33{
        width: 100%;
    }
    .disp-flex{
        display: initial;
    }
    .mobile-disp-flex{
        display: flex;
    }
    header h2{
        font-size: 2em;
    }
    footer #address_details>div{
        padding-inline:1%;
    }
    footer #address_details div.icon{
        padding-left:0;
        padding-right: 2%;
    }
}