body.visit-template-template-tourism main#main{  background: var(--hi_grey1); }

#currentfilters,
#placesmap,
#placestovisit { background: var(--hi_grey1);  margin: 0;  }
#placesgrid {    padding: 36px 0 ; }


#placestovisit { display: flex; }
#placesgrid{ width: calc(50% - 12px); }
body.page-template-template-unguided #placesgrid { width:calc(100% - 36px);}

#placesmap { width: calc(50% - 12px); margin-left: auto}

/*@media all and (max-width: 1199.98px) {
    #placesgrid {        width: calc(66.666% + 24px); }
    #placesmap {   width: calc(33.3333% - 24px); }
}*/
@media all and (max-width:899.98px) {
    #placestovisit { flex-direction: column; }
    #placesgrid {        width: 100%; }
    #placesmap {   width: 100%;
        order: -10; }
}
body.visit-template-template-places #maincontent,
body.page-template-template-unguided #maincontent { overflow: visible;}
body.page-template-template-unguided #bannerholder,
body.visit-template-template-places #bannerholder { margin-bottom: 0; }

#placesgrid>ul { display: flex; flex-wrap: wrap; padding: 12px 12px 12px calc(var(--outer-05) - 12px); padding-right: 0; }
#placesgrid>ul li { /*width:var(--outer-4); margin:0 0 var(--outer-1) var(--outer-1);*/

    width: calc(50% - 24px); margin: 12px;
    display: flex; flex-direction: column; }


body:is(.page-template-template-whatson,.error404) #placesgrid { width: 100%;}
body:is(.page-template-template-whatson,.error404) #placesgrid>ul  { padding: 12px calc(var(--outer-05) - 12px) 12px ;  }
body:is(.page-template-template-whatson,.error404) #placesgrid>ul li { width: calc(33.3333% - 24px); }

body.page-template-template-unguided #placesgrid>ul li { width: calc(25% - 24px); }

@media all and (min-width:2000px) {
    #placesgrid>ul li {
        width: calc(33.3333% - 24px);
    }
    body:is(.page-template-template-whatson,.error404) #placesgrid>ul li,
    body.page-template-template-unguided #placesgrid>ul li ,
    body.page-template-template-whatson #placesgrid>ul li { width: calc(25% - 24px); }

	
body.page-template-template-unguided #placesgrid { width:calc(100% - 48px);}
}
@media all and (min-width:900px) and (max-width: 1199.98px) {
    #placesgrid>ul  { padding-left: 0; padding-right: 0; }
    #placesgrid>ul li {
        width: calc(100% - 24px);
    }
	
	
	body.page-template-template-unguided #placesgrid>ul li ,
    body:is(.page-template-template-whatson,.error404) #placesgrid>ul li { width: calc(33.3333% - 24px); }
}
@media all and (max-width: 1199.98px) {
	
	body.page-template-template-unguided #placesgrid { width:100% !important; }
	 
    body:is(.page-template-template-whatson,.error404) #placesgrid>ul li { width: calc(50% - 24px); }
}
@media all and (max-width: 899.98px) {
    #placesgrid>ul  { padding-left: 0; padding-right: 0; }
	body.page-template-template-unguided #placesgrid>ul li ,
    body:is(.page-template-template-whatson,.error404) #placesgrid>ul li { width: calc(50% - 24px); }
}
@media all and (max-width: 599.98px) {
    #placesgrid>ul li,
	body.page-template-template-unguided #placesgrid>ul li ,
    body:is(.page-template-template-whatson,.error404) #placesgrid>ul li {
        width: calc(100% - 24px);
    }
}

#placesgrid>ul li picture{width:100%; display:block; height:auto; padding-bottom:60%; position: relative;}
#placesgrid>ul li img{
    position: absolute; object-fit: cover; width: 100%; height: 100%;
}
#placesgrid>ul li a {
    flex: 1;
    display: block; display: flex; flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #ECEAE6;
    color: #30312C;
    transition: all 0.2s ease;

}

#placesgrid>ul li a header {
    padding:var(--outer-025); flex: 1;  display: flex; flex-direction: column;
    position: relative;
}
/*#placesgrid>ul li a header.has_status {
    padding-right: 82px;
}*/
#placesgrid>ul li a header p.title,
#placesgrid>ul li a header h3 {
    font-size: 0.833333333333333rem !important; font-weight: 700 !important; line-height: 1.111 !important; margin-bottom: 0.5em !important;
}

#placesgrid>ul li a header p strong {font-weight: 700 !important; }

#placesgrid>ul li a header p {
    font-size: 0.75rem !important; font-weight: 400 !important; line-height:1.25 !important; margin-bottom: 0 !important;
}

#placesgrid>ul li a header p.distance {
    font-weight: 400 !important;
    font-size: 0.5833333333333333rem !important;
    padding-top: 0.5rem;
    margin-top: auto;
}
#placesgrid>ul li a header p.distance strong { 
    font-weight: 600 !important;
}
/*#placestovisit>ul li a header a {display:block; background: #FFF8EA; color: #5D5F56; transition: all 0.2s ease; }
*/


#placesgrid>ul li a header p:first-child:not(.title) { width: 6em; height: 6em; border-radius: 50%; background: white; border:2px solid #cebf89; float: right;font-size: 12px !important; margin: 0 0 1em 1em; text-align: center; text-transform: uppercase; line-height: 14px !important; display: flex; align-items: center; font-weight: 600 !important; letter-spacing: -0.01em;

    /*position: absolute; top: var(--outer-025); right:var(--outer-025);*/
}

#placesgrid>ul li a header p:first-child.so { border-color:var(--hi_grey1); background:var(--hi_grey1); color:white;  }

#placesgrid>ul li a header p:first-child:not(.title) span { transform: translateY(1px); }

#placesgrid>ul li a.unstaffed header p:first-child:not(.title) { background: #76bfa1; border-color: #76bfa1; color: black; }

#placesgrid>ul li a header p.sm:first-child:not(.title) { width: 60px; height: 60px; font-size: 8px !important; line-height: 10px !important; }

#placesmap ul li a header p:first-child:not(.title) {display:none;}

#placestop { padding-left: var(--outer-05); padding-right: 24px; padding-bottom:12px; color: white; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#placestop #currentfilters { margin-bottom: 12px; }
#currentfilters { width:100%; }
#currentfilters dl{ display: flex; flex-wrap: wrap; padding: 0; }
#currentfilters dt,
#currentfilters dd { margin: 0 19px 16px 0;
    font-size: 16px;
    line-height: 19px; padding: 0.75em 8px 0.666em 0; padding: 0.75em 8px 0.666em 0;

}
#currentfilters dt { color: #CEBF89; color:#F6F5EA;

    background: var(--hi_yellow); color: black;
    padding: 0.75em 1em 0.666em 1em;
    border-radius: 8px;
}

#currentfilters dd {   background: #FFFFFF;
    border: 1px solid #76CACA; font-weight: 600;
    padding: 0.75em calc(1em + 18px + 4px) 0.666em 1em;
    border-radius: 8px; color: #002422; text-align: center;
    position:relative; }




#currentfilters dd>b { position:absolute; width: 18px; height: 18px; display: block; top:50%; right:12px; margin-top:-10px;}


#currentfilters dd>b::before,
#currentfilters dd>b::after
{content:""; height: 1px; background: #002422; width: 21px; display: block; position:absolute; top:calc(50% + 1px); left: 50%; transform: translate(-50%,-50%); }
#currentfilters dd>b::before{ transform: translate(-50%,-50%) rotate(-45deg); }
#currentfilters dd>b::after{ transform: translate(-50%,-50%) rotate(45deg); }


#currentfilters.notinuse { display: none;}



@media all and (max-width: 599.98px) {
    #currentfilters dt,
    #currentfilters dd  { font-size: 14px; line-height: 1; padding:0.5em 0.5em 0.4em 0; margin:0 1em 1em 0; }
    #currentfilters dt  { padding:0.5em 0.5em 0.4em 0.5em; border-radius: 5px; }
    #currentfilters dd  { padding:0.5em 1.5em 0.4em 0.5em; border-radius: 5px; }


    #currentfilters dd>b { width: 12px; height: 12px; right:6px; margin-top:-6px; }
    #currentfilters dd>b::before,
    #currentfilters dd>b::after
    { width: 10px;   }


}




#placestovisit>p { color: #CEBF89; color: #F6F5EA; font-size: 24px; padding: 0 30px;
    line-height: 29px; margin-left: var(--outer-1); margin-right: var(--outer-1);  }

/*#placesmap { padding: var(--outer-05) var(--outer-1);}*/
/*
#placemap { height:calc(80vw - var(--inner-2)); max-height:80vw;}
*/

#placesmap{    max-height: calc(100vh - 85px); min-height: 550px;
    top: 85px;
    position: sticky !important;
}

#placemap{    height: 100%; width: 100%;
    top: 0; left: 0;
    position: absolute !important;
}


@media all and (max-width: 1199.98px) {


    #placesgrid>ul li a header {  padding: 20px; }
}

@media all and (max-width: 899.98px) {

    #placesmap, #placemap{    height: 450px;  min-height: 0px;
        top: 0;
        position: relative !important;
    }

/*    #placesgrid>ul li { width:var(--outer-65) ;  }*/
}


@media all and (max-width: 599.98px) {
/*    #placesgrid>ul li { width:var(--outer-14); }*/
    #placesgrid>ul figure figcaption { .
    font-size: 0.5833333333333333rem; }


    #currentfilters dl,
    #placestovisit>p { /*padding-left: var(--outer-1);padding-right: var(--outer-1);*/}


    /* #placesgrid>ul li a header { padding:var(--outer-1);   }*/

    #placesgrid>ul li a header p.title,
    #placesgrid>ul li a header h3 { font-size: 18px !important; }
    #placesgrid>ul li a header p { font-size: 14px !important; }
}


#placesgrid>ul li a {
    transition: all 0.2s ease; }
#placesgrid>ul li a:hover { box-shadow: 0 16px 16px rgba(0,0,0,0.25), 0 8px 8px rgba(0,0,0,0.22); }



div.mappopup { width:270px; font-family: 'lato',sans-serif; min-height: 200px; background: #ECEAE6; background:white;
}
div.mappopup a { display: block;  color: #30312C;}
div.mappopup a picture {display:block; width: 100%; height:0; padding-bottom: 60%; position:relative; }
div.mappopup a picture img{
    position: absolute; object-fit: cover; width: 100%; height: 100%;
}
div.mappopup a header {
    padding:0.5833333333333333rem;
}
div.mappopup a header h3 {
    font-size: 0.5833333333333333rem !important; font-weight: 700 !important; line-height: 1.111 !important; margin-bottom: 0.5em !important;
}
div.mappopup a header p {
    font-size: 0.5rem !important; font-weight: 400 !important; line-height:1.25 !important; margin-bottom: 0 !important;
}

div.mappopup a header p:first-child:not(.title) { display:none !important; }

#placemap .gm-style-iw-t::after { background: linear-gradient(45deg,rgba(236,234,230,1) 50%,rgba(236,234,230,0) 51%,rgba(236,234,230,0) 100%);
}
#placemap .gm-style-iw-d+button {opacity: 1 !important; top: 0 !important; right: 0 !important; width:24px !important; height:24px !important;  background: #ffb2bb !important	; }
/*#placemap .gm-style-iw-d+button::before {display:block; content:""; position: absolute; width:100px;  height:50px;    top: 0;
    right: -20px;
    transform-origin: right top; transform: rotate(45deg);
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
}*/

#placemap .gm-style-iw-d+button img{     margin: 5px !important; }

/*#placestovisit>ul li a header a {display:block; background: #FFF8EA; color: #5D5F56; transition: all 0.2s ease; }
*/
body.loading::before { display: block; content:""; width: 100%; height: 100%; position: fixed; left:0; top:0;  background: rgba(0,77,68,0.666); background-position:center; background-repeat:no-repeat; z-index:999; }

body.loading::after{ z-index:999; content:" "; display:block;width:90px;height:90px;animation:spin 1s infinite linear;border-radius:50%;border-width:8px;border-style:solid;border-color:rgba(255,255,255,0.75) #004d44 rgba(255,255,255,0.75) #004d44;

    border-color:rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(255,255,255,0.5) rgba(255,255,255,1);

    overflow:hidden;text-indent:-99999em;margin:auto;position:fixed;top:50%;left:50%; margin:-45px 0 0 -45px; }


@keyframes spin{to{transform:rotate(360deg);}}

#tourism {  margin:calc(0px - var(--outer-1)) var(--outer-1) var(--outer-05); background: #ECEAE6; border-radius: 16px;
    color: #30312C; display:flex; justify-content: space-between;    z-index: 10;
    position: relative;}

#tourism div { width:calc((100% / 14) * 9); padding:40px 20px;  display: flex; flex-direction: column; }
#tourism div img { display: block; width: 100%; height: auto; }
#tourism div:first-child { width:calc((100% / 14) * 4);   }
#tourism div h1,
#tourism div img,
#tourism div p { margin-top: auto; margin-bottom: auto;}
#tourism div h1 { max-width: 100px;     max-width: 400px;
    margin: auto;}
#tourism div p { max-width: 32em; padding-right: 1em;}

@media all and (max-width: 1199.98px) {
    #tourism div p { font-size: 0.8333333333333333rem;}

    #tourism div:first-child {   padding-left: 10px; }
    #tourism div:last-child {   padding-right: 10px; }


}
@media all and (max-width: 899.98px) {
    #tourism div, #tourism div:first-child{  padding:20px 0; width:calc(50% - 20px);   }
    #tourism div p { font-size: 0.75rem;}

    #tourism {  margin:calc(0px - var(--outer-2)) var(--outer-1) var(--outer-1); }

}


@media all and (max-width: 599.98px) {
    #tourism {display: block;}
    #tourism div, #tourism div:first-child { width: 100%; padding: 20px; }
    #tourism div:first-child {   padding-bottom: 0; }
    #tourism div p { font-size: 0.66666666666rem;}

}

body.single-itineraries #placesgrid { width: 100% !important; padding:0 !important;}
body.single-itineraries #placesgrid > ul > li { max-width:480px;     min-width: 360px; }