@import url(menu-tendina.css);
@import url(norm-variabili.css);
/*@import url(norm-layout.css);*/


/* variabili BEGIN */
:root {
 --old-mattone: #bc5a1f;
 --mattone: #954829;
 --panna-altro:#FBFBF0; 
 --panna:#F4E492;
 --verde-chiaro:#C2BFA5;
 --grigioscuro: #a9a9a9;
 
 --centered-margin-left: auto; 
 --centered-margin-right: auto;
 --centered-margin: var(--centered-margin-left) var(--centered-margin-right);
 
 --shadow: gray 4px 4px 4px; /* box-shadow */
 --tshadow: gray -1px -1px; /* text-shadow */
 --rounded: 6px; /* border-radius */
 
 --font-family: arial, tahoma, verdana, sans-serif;
}
/* variabili END */

/* shape BEGIN */
@supports (shape-outside: circle(50% at 60%) margin-box) {
.shape {shape-outside: circle(50% at 60%) margin-box;
  clip-path: circle(50% at 70%);
  float: right;
  width: 52%; 
  height: 400px; 
  padding: 20px;}
}
/* shape END */


/* modal images BEGIN */

.modal-hover-opacity img, img[onclick] {
 opacity:1;
 filter:alpha(opacity=100);
 -webkit-backface-visibility:hidden;
/*  max-width: 400px; */
 cursor:pointer;
/*  max-height: 50vh;   */
}

.galleria .modal-hover-opacity img {max-width:300px; 
 max-height: 50vh;} /* per evitare immagini troppo grosse in cara belta*/
 
.modal-hover-opacity img:hover, img[onclick]:hover {
 opacity:0.60;
 filter:alpha(opacity=60);
 -webkit-backface-visibility:hidden;
}

.modal {
  z-index: 5;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  /*display: flex;*/ /*when shown*/
  display: none; /* hide initially*/
  justify-content: center;
  align-items: center;
}
.modal-content {
  margin: auto;
}

#modalimg {
  position: sticky;
  z-index: 6;
  width: auto;
  height: auto;
  display: block;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100% - 2rem);
  object-fit: contain;
  border: 5px solid #000;
}

.modal-content {
  animation: fade 2s ease;
  z-index: 5;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#modalimg {
  animation: zoom 1s ease;
}
@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.expandable {
  color: #98987F;
  text-decoration: none;
  border-bottom: dashed 1px; 
}

a.interno.expanded:after {
  content: ' \002D';
  font-weight: bold;
  margin-left: 1px;  
}

.espan {
  padding-left: 2%;
  color: navy;
  font-size: 85%;
  display: block;
}

.subtitle {
  font-size: 105%;
  text-align: right !important;
  font-style: italic;
  max-width: 80%;
  margin-top: -1.5%;
}

/* modal images END */


/* tags generici BEGIN */

body, h1, h2, p, table, td  {
  font-family : arial, tahoma, sans-serif;
}

#content p:not(#top p), td {
  text-align : justify;
/*     font-size: 110%; */
}

body {
  color: black; 
}

h1, h2, h3, h4, .h2 {
  clear: both;
  font-weight : bold;
}

h1 {
  margin-left: 2%;
}

h2, .h2 {
  margin-left: 4%;
}

h3 {
  margin-left: 5%;
}

h4{
  margin-left: 6%;
}

h1, h2, h3, .h2, .h3 {
  text-indent: 2%;
  width: 70%;
}

h1:first-letter, h2:first-letter, h3:first-letter {
  text-transform: capitalize;
}

h1  {
  font-size: 200%;
}

@font-face {
	font-family: 'medioevale';
	src: url('multimedia/fonts/Mariposa-Std-Book.otf');
}

h1:not(.ribbon), h2 {
  font-family: 'medioevale', serif;
  background: -webkit-linear-gradient(var(--mattone) 30%, var(--panna) 90%, var(--mattone));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1.ribbon {
  text-shadow: silver -1px -1px 1px;
}

h2, .h2, h3, .h3, h1 {
  border-image: linear-gradient(to right, #d9d3ca, #c46a2b, #d9d3ca) 1;
  border-bottom-style: solid;
  border-bottom-style: medium;
}

h2, .h2 {
  font-size : 160%;
}

h3, .h3  {
  font-size : 130%;
}

h3, h4, h3 a, h4 a{
   color: black;
}

h4, .h4  {
  font-size : 115%;
  font-weight: bold;
}

thead th {
  background: #515151;
  color: white;
}



/*--- anchor -----*/
a {
  color: #ab2c2c /*#9F6F31; #FFD275*/; 
  font-weight : bold; 
}
a:hover  {
  text-decoration: none;
}
h2 a {color: white; }
h2 a, h3 a {  text-decoration: none}
a[class="esterno"]:after {content:' ' url(img/linkout.gif);}
#piede a[class="esterno"]:after, #trovaci a[class="esterno"]:after {content:none;}


blockquote, blockquote p { quotes:"\00AB" "\00BB" "\201C" "\201D"; }
q {quotes: "\00AB" "\00BB" "\201C" "\201D"; }
q[cite]:after {content: close-quote " ("attr(cite)")";}
/*per citazioni */
	
q:before {content: open-quote;}
q:after {content: close-quote;}
cite {font-style: normal;}
/*blockquote p:first-child:before {content: open-quote;}
blockquote p:last-child:after {content: close-quote;}*/

li{ list-style-type : square; list-style-position : inside;}

#content img {box-shadow: 4px 4px 5px #4C4C4C;
  border: none; margin: 5px; border-radius: 8px;}
img[alt="Albergo Giardino"]{font-size: 300%; text-align: center;}/*se disattivo immagine*/

dfn { cursor : help; border-bottom : dotted thin white; }

dt {font-weight: bold;}

.hide {display:none}
.outset {border: outset thin; padding: 5px 5px 5px 15px;}

.mini{font-size: 85%;}
.tratteggiato{border: dashed thin ; padding: 4px;}

.fr {float: right;}
.fl {float: left;}

.nota /*rimando*/ { font-size: 50%; vertical-align: top;}
a.interno {text-decoration: none; border-bottom: dashed thin;}

.center /*per centrare*/ {
/*   margin-left:auto; margin-right: auto; text-align:center; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
} 
.ads {margin-left:2%; margin-top: 3%;}
.rounded {border-radius: 4px; }
.outset, .shadow {box-shadow: 8px 8px 5px gray; border-radius: 4px; -moz-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;}

.evid {background: yellow;}

.big {font-size: 150%;}
.white {color: white;}
.panna {background: var(--panna);}
.silver {background: silver}

.boxino {
  background: white;
  margin: 8px;
  padding: 1%;
  width: 40%;
  float: right;
  border-radius: 6px;
  box-shadow: 5px 5px 8px gray;
}

.box {
  border: solid thin #C2BFA5;
  background: white;
  padding: 5px;
  width: auto;
  margin: 3% 1%;
  box-shadow: 3px 3px 6px gray; 
  border-radius: 8px;  
  text-align: center;
}

.red {color: red;}

/* tags generici END */

/* ---- WebFonts BEGIN ---- */
@font-face {
	font-family: 'carolingia';
	src: url('https://www.sirmione.it/multimedia/fonts/carolingia.ttf');
}
@font-face {
	font-family: 'isadora';
	src: url('https://www.sirmione.it/multimedia/fonts/isadora.ttf');
}
@font-face {
	font-family: 'matisse';
	src: url('https://www.sirmione.it/multimedia/fonts/matisse.ttf');
}

/*---- WebFonts END ---- */

/* --- tooltip BEGIN --*/
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  /*width: 220px;*/
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: gray 6px 3px 3px;
}
/* --- tooltip END --*/

/*---------- fumetto bubble a freccia in giu' BEGIN --------------*/
.fumetto {
	position:relative;
	padding:15px;
	margin:1em 0 3em;
	color:#000;
	border-radius:10px;
	width: 50%; margin-left: 35%;
}
.fumetto:after {
	content:"";
	position:absolute;
	bottom:-15px; /* value = - border-top-width - border-bottom-width */
	right:350px; /* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
/* fumetto piu' complesso */
.fumetto2, #prezzi-intro {
	position:relative;
	padding:15px 30px;
	margin:0;
	/*mie aggiunte*/ width: 50%; margin-left: 35%; margin-bottom: 3%; height: 80px;
	color: white; font-weight: bold; font-size: 110%;
	background:#FCA916; /* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ED4810), to(#FCA916));
	background:linear-gradient(#ED4810, #FCA916);
	/*filter:progid:DXImageTransform.Microsoft.Gradient (endColorstr='#f3961c', startColorstr='#f9d835', gradientType='0'); incompatibile col border-radius */
	/* Using longhand to avoid inconsistencies between Safari 4 and Chrome 4 */
	-webkit-border-top-left-radius:25px 50px;
	-webkit-border-top-right-radius:25px 50px;
	-webkit-border-bottom-right-radius:25px 50px;
	-webkit-border-bottom-left-radius:25px 50px;
	-moz-border-radius:25px / 50px;
	border-radius:25px / 50px;
}


/* display of quote author (alternatively use a class on the element following the blockquote) */
.fumetto2 + p {margin:10px 150px 2em 0; text-align:right; font-style:italic;}

/* creates the larger triangle */
.fumetto2:before, #prezzi-intro:before {
	content:"";
	position:absolute;
	bottom:-30px;
	right:80px;
	border-width:0 0 30px 50px;
	border-style:solid;
	border-color:transparent #f3961c;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller triangle */
.fumetto2:after, #prezzi-intro:after {
	content:"";
	position:absolute;
	bottom:-30px;
	right:110px; 
	border-width:0 0 30px 20px;
	border-style:solid;
	border-color:transparent #fff;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/*---------- fumetto bubble a freccia in giu' END --------------*/

/* wubook widget BEGIN */
/* questo funziona */
@media screen and (min-width: 700px)
{.kw_container_fixed_bottom {bottom: 10% !important;}
}
.kw_theme_ligth.kw_container {background-color: transparent !important;}

.kw_ui_widget-header .kw_ui_icon {
  background-image: url('multimedia/img/clips/four_arrows_thin.png') !important;
}
/* wubook widget END */


/* auguri natalizi BEGIN */
#natalizio {
  text-align: center;
  font-size: 2vw;
  width: 90%;
  padding: 1%;
  margin-top: 2%;
  margin-bottom: 1%;
  margin-left: auto;
  margin-right: auto; 
  text-align: center; 
  background-image: linear-gradient(to bottom, #E0CA7F,#9A7733); 
  padding-top: 0%; padding-bottom: 2%; border-radius: 12px; box-shadow: gray 8px 8px 8px;  
}
#natalizio {color: white; text-shadow: gray 1px 1px 2px;}
#natalizio img {box-shadow: none; max-width: 3vw; }
#natalizio span:not([lang="it"]){display:none;}

/* auguri natalizi END */


/*_______per le etichette sotto le immagini --BEGIN--*/
.caption_sx, .caption_dx, .caption {
  position: relative;
  font-size: 80%;
  font-weight: bold;
  /*background: white;*/
  border: inset silver 4px;
  border-radius: var(--rounded);
  padding: 2px;
  height: auto;
  margin: 8px;
  }
.caption_dx {
  float: right;}
.caption_sx {
  float: left; }
  
.caption_sx > figcaption, .caption_dx > figcaption, .caption > figcaption, .caption_sx > p, .caption_dx > p, .caption > p {
  visibility: visible;
  position: absolute;
  bottom: 20px;
  left: 40px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: var(--rounded);
  color: #fff;
  padding-left: 20px;
  padding-right: 10px;
}

figcaption {
  display: inline !important; }

.caption_sx:hover > figcaption, .caption_dx:hover > figcaption, .caption_sx:hover > p, .caption_dx:hover > p {
  visibility: hidden;}

.caption_dx.shape > figcaption, .caption_dx.shape > p {
  position: absolute;
  bottom: 20px;
  left: 44%;
  background-color: black;
  background: rgba(0, 0, 0, 0.4);
  /*opacity: 0.6;*/
  border-radius: var(--rounded);
  color: white;
  padding: 5px;
}

.caption_sx.shapesx > figcaption, .caption_sx.shapesx > p {
  position: absolute;
  bottom: 20px;
  right: 58%;
  background-color: black;
  background: rgba(0, 0, 0, 0.4);  
/*   opacity: 0.6; */
  border-radius: var(--rounded);
  color: white;
  padding: 5px;
}
.caption_sx.shapesx, .caption_dx.shape {
  border: none;}

/*_______per le etichette sotto le immagini --END--*/

 /*------- css ribbon principali BEGIN ---------------*/
 .ribbon {
 font-size: clamp(1.5rem, 3vw + 1rem, 3rem); /*32px !important*/;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

 width: 50%;
 position: relative;
 background: #ab2c2c;
 /*aggiunte*/
 background: linear-gradient(to bottom, #EFD22B, #ab2c2c);
 /*fine aggiunte*/
 color: #fff;
 text-align: center;
 padding: 2%; /* Adjust to suit */
 margin: 2em auto/* 3em*/; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}

/*------------- ribbons -----BEGIN--------------*/

.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.3em solid #ab2c2c;
 z-index: -1;
}
.ribbon:before {
 left: -1.8em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -1.8em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

.ribbon-content a {color: white; text-decoration: none; }

/*------------- ribbons -----END--------------*/

/*------- css ribbon principali END ---------------*/

/*------------- riccioli (angoli arricciati) BEGIN ----------------*/
.curl {
	position: relative;
	z-index: 1; /* To prevent shadows behind containers */
	overflow: hidden;
	/*list-style: none;*/
	margin: 0;
	padding: 0;
	}
.curl p, .curl ul {
	position: relative;
	float: left;
	min-width: 30vw;
	/*height: 150px;*/
	padding: 1%;
	border: 1px solid #efefef;
	margin: 0 30px 30px 0;
    background: white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	}
.curl p:before, .curl p:after,
.curl ul:before, .curl ul:after
 {
	content: '';
	z-index: -1;
	position: absolute;
	left: 10px;
	bottom: 10px;
	width: 40%;
	max-width: 100vw; /* Prevents rotation */
	height: 55%;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	transform: skew(-15deg) rotate(-6deg);
	}
.curl p:after, .curl ul:after {
	left: auto;
	right: 10px;
	transform: skew(15deg) rotate(6deg);
	}
/*------------- riccioli (angoli arricciati) END ----------------*/

/* pro accessibility */

.skip-link {
  display: none;
}

/* oveflow (ades per faq)*/
.overflow { /* da https://pqina.nl/blog/fade-out-overflow-using-css-mask-image/ */
  --scrollbar-width: 8px;
  --mask-height: 52px;
  overflow-y: auto;
  max-height: 300px;
  padding-bottom: var(--mask-height);
  padding-right: 20px;
  padding-top: 30px;

  --mask-image-content: linear-gradient(
    to bottom,
    transparent,
    black var(--mask-height),
    black calc(100% - var(--mask-height)), transparent);

  --mask-size-content: calc(100% - var(--scrollbar-width)) 100%;
  --mask-image-scrollbar: linear-gradient(black, black);
  --mask-size-scrollbar: var(--scrollbar-width) 100%;
  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat, no-repeat;

}

/* multilanguage choice BEGIN */

body[lang=it] *[lang]:not([lang="it"]){display:none;}
body[lang=fr] *[lang]:not([lang="fr"]){display:none;}
body[lang=en] *[lang]:not([lang="en"]){display:none;}
body[lang=de] *[lang]:not([lang="de"]){display:none;}
body[lang=es] *[lang]:not([lang="es"]){display:none;}
/* vedono i russi l'inglese */
body[lang=ru] *[lang]:not([lang="en"]){display:none;}

html[lang="it"] .en { display: none!important; }

/* multilanguage choice END */