/* communia BEGIN */

h2 {margin-top: 2%;}

ul[lang], .prezzi-testo p {
  background-image: radial-gradient(white 5%, #f3f0e4);
  border: outset thin #bb7e42;
  border-left: solid 12px #bc5a1f;
  padding: 5px 5px 5px 15px;
}

ul[lang] {

}
ul[lang], .prezzi-testo p {
  box-shadow: 6px 6px 3px gray; 
  border-radius: 8px;}

/* li {line-height: 14pt;} */
.b {color: black; font-weight: bold;}
hr{ width:70%; text-align:center; clear: both; /*clear: per evitare che flotti a fianco della foto pergola*/
margin-left: auto; margin-right: auto;}
body {padding 4% 0;
  margin-top: 0%;
  font-size: clamp(100px, calc(30% / 2rem + 10px), 900px); /*calc(12px + 1.8hw);*/ /*clamp(1.1vw, 2vw, 0.9vw);*/}
#quicknews img {max-width: 20vw !important;}
#nav li {font-variant: small-caps;}
/* communia END */

/*--- mobile BEGIN ---*/

@media screen and (max-width: 480px) 
{
[class*="caption"], [class*="caption"] img {max-width: 80vw !important;}
ul {padding-left: 8px; /*margin-right: 25%; */ /*font-size: 80%;*/}
ul, table {/*background: #C0BBA5; */font-weight: normal;}
p, table, dt, dd {/*font-size: 65%;*/ display: inline-block;}
h3, .h2 {/*font-size: 90%;*/}
.b {/*font-size: 80%;*/}
body {margin: auto 4%;background: white;}
.middle{vertical-align: middle;}
.center {text-align: center; margin-left: auto; margin-right: auto;}
#struttura ul, #camere ul {margin-left: auto; margin-right: auto; max-width: 90%;}
.menu {display: none;}
}  


@media screen and (max-width: 700px)
{
  *, [class*="caption"] {float: none !important;}
  #olon {margin: 0px; padding: 2px !important; padding-left: 0px !important; width: 96%; position: static !important;}
  #foto a {display: block !important;}
  #galleriafoto img {max-width: 90%;}
  #indirizzo {margin-left: 2% !important; margin-top: 3% !important;}
  body {background-image: none; background: white !important; padding-left: 0px !important;}
  #white {box-shadow: none !important;}
  .flip-container div {
  padding:3%; max-width: 98%;}
  .flip-navigation {display: none !important;}
  img {max-width: 98%; height: auto; }
  h2, ul {width: 90%;}
  #top p {text-align: center !important;}
    
  p#apertura {margin-top: 0%; /*margin-bottom: -8%;*/} 

  /* auguri natalizi */ 
  #natalizio_giardino {
  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_giardino img {box-shadow: none; max-width: 3vw !important; }
  #natalizio_giardino span[lang="it"], #natalizio_giardino span[lang="fr"] {font-size: 3.8vw !important;}
  #natalizio_giardino span[lang="en"], #natalizio_giardino span[lang="es"] {font-size: 2.8vw !important;}
  #natalizio_giardino span[lang="de"] {font-size: 1.8vw !important;}
  
  #oldnews {position: absolute; top: 0vw; left: 0vw; border-radius: 3%; box-shadow: gray 3px 4px 4px; width: 80vw; height: 90vh; padding: 1%; margin-top: 0px; z-index: 0}
  div, p, table, ul, li {max-width: 95vw; }


  /*.carousel, .carousel-cell {max-width: /*calc(80% - 2rem);*/ /*90vw;*/}*/
/*  #struttura {display: block; clear: both;}*/
}

@media screen and (max-width: 954px) {
#piede.giardino {
  width: 95vw - 10px;}
/*  #struttura {display: block; clear: both;}*/
}
@media screen and (max-width: 785px) {
/* #flip-navigation {display: none !important;}} */
/*  #struttura {display: block; clear: both;}*/
}

/*---------mobile END------------------*/

/*-------no-mobile BEGIN --------------*/
@media screen and (min-width: 700px) 
{
#oldnews {position: absolute;
  top: -10vw; left: -10vw; border-radius: 3%;
  box-shadow: gray 3px 4px 4px; width: 80vw; height: 85vh; padding: 1%; margin-top: 0px; z-index: 0;}

#camere ul li {/*padding-right: 5%;*/ }

#struttura, #camere, #prezzi, #trovarci, #news, #content {
  display: grid;
  grid-gap: 10px;
}

#struttura, #camere {
  grid-template-columns: 45% 54%;
}

#prezzi {
  grid-template-columns: 50% 40%;
}

#trovarci {
  grid-template-columns: 70% 20%;
}

/*#news-testo {grid-area: news;}
#news-foto {grid-area: foto;}
#old-news  {grid-area: old-news;}*/

/*#news {
  grid-template-areas:
   'news foto'
   'old-news old-news';padding: 5px 5px 5px 15px;
}*/

/*-------no-mobile END --------------*/

/* layout BEGIN */
body {
  border: none; box-shadow:none; margin-left: auto; margin-right: auto; 
}

#olon {
   padding: auto 2%;
   position: absolute;
/*    top:0px; */
   left: 8px; right:8px; /*tolti se no si sposta a sx*/
/*    bottom:-10px; */
   max-width: 1024px;
   margin-right: auto; margin-left: auto;
}

#apertura /*contiene la div di apertura*/{
  width: 100%;
  text-align: center;
}

/* aggiunte per sfondo bello */
#apertura {
  background: white;}

#indirizzo {
  padding: 1%;
  border: solid 2px #bc5a1f;
  box-shadow: gray 8px 8px 8px;
  border-radius: 10px;
  margin: 2%; 
}

#content {width: 100%;
  height: 540px;
  align-content: start;
}

/* mie aggiunte */
#cambialingua {font-size: 70%; text-align: center; margin: auto;}
#cambialingua a {text-decoration: none; color: gray;}
/* p#apertura {background: none; height: auto; margin-top: -6%; margin-bottom: -8%; text-align: center;} */
p#apertura #mobile img {margin-bottom:0%}
p#indirizzo {background: none;}
/* #sottotesta {margin-top: 1%; margin-bottom: 1%;} */

#social {font-size: 90%; margin-left: 3%;}


#piede {
  clear: both;
  }
#piede.giardino {
  background: var(--gradient-scuro);
  margin: 1% auto;
}
#piede p {margin: 3px auto;}
#piede #riferimenti p {text-align: center; font-size: 90%; color: white;}
#riferimenti a {color: white;}

/* layout END */

.right {text-align: right;}


#oldnews {background: white !important;}

#natalizio_giardino {
  text-align: center;
  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;  
  color: white; text-shadow: gray 1px 1px 2px;}
  #natalizio_giardino img {box-shadow: none; height: 3vh;}
  #natalizio_giardino span[lang="it"], #natalizio_giardino span[lang="fr"] {font-size: 2vw;}
  #natalizio_giardino span[lang="en"], #natalizio_giardino span[lang="es"] {font-size: 1.8vw;}
  #natalizio_giardino span[lang="de"] {font-size: 1.2vw;}


div h2 {margin-top: 0px;}

/* widget wubook */
@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;
}

@media screen and (max-width: 700px) 
{
#wubook {
  position: relative;
/*  z-index: 1 !important;*/
}
}


#struttura-foto, #camere-foto {width: 100% !important;}
#struttura-foto img[onclick], #camere-foto img[onclick] {max-width: none;}

article {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* una colonna per default (mobile) */
}

@media (min-width: 768px) {
  article {
    grid-template-columns: 1fr 1fr; /* due colonne affiancate */
  }
}

#social img {width: 2vw;}

/*----- effetto zoom ---*/

/* #content {animation:animatezoom 1s} */
#content {position: relative;
  animation: animatezoom 1.2s ease, animatetop 0.4s ease;}
@keyframes animatezoom {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

@keyframes animatetop {
  from { top: -300px; opacity: 0; }
  to   { top: 0; opacity: 1; }
}