html, body {
    height: 100%;
	width: 100%;
    margin: 0px;
    padding: 0px;
  }
/*  #sezione0,
  #sezione1,
  #sezione2, */
  #sezione0 {
   height: 100vh;
   background: #7690A3 url("/pagine_temp/cittamedievale.svg") no-repeat;
   background-size: cover;
   overflow: hidden;
  }
  #sezione1,
  #sezione2 {
	height: 100vh;
	overflow: hidden; 
 }
  #sezione3 {
    overflow-y: auto;
  }
  .sezione {
    height: 100%;
    width: 100%;
   /* display: flex; */
    align-items: center;
    justify-content: center;
    text-align: center;
  }  
  
  .freccia {
    height: 3vh;
    padding: 0.4vh;
    color: white;
    display: inline-block;
  }
  .lfreccia {
/*    padding: 0.4vh; */
    color: white;
    display: inline;
    float:left;
    width:2.5vh;
    height: 2.5vh;
    margin-left: 5%;
    margin-top: 0.5vh;
   /*  height:42px; */
  }
  
  .rfreccia {
 /*   padding: 0.4vh; */
    color: white;
    display: inline;
    float:right;
     width:2.5vh;
    height: 2.5vh;
    margin-right: 5%;
    margin-top: 0.5vh;
  /*  height:42px; */
  }

  .titolo_sezione {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 1.3vh;
    height: 6vh;
    background-color: #111;
    max-height: 5vh !important;
      white-space: nowrap !important;
      clear: all;
  }
    .titolo_sezione h3 {
    color: white;
    padding-top: 0.75vh;
    padding-bottom: 0.5vh;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }
      .titolo_sezione h3 a {
        color: white !important;
      }
      .titolo_sezione h3 a:hover {
        color: #5083b6;
      }
      .titolo_sezione h3 a:active {
        color: #eae000;
        font-size: 140%;
      }
      .titolo_sezione h3 a:visited {
        color: #aaa;
      }

/* ============= sezione 0 - scritte ============= */  
@media screen and (min-width: 1024px) { 
  .titolo_principale {
    margin-top: 3vh;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .big {
    color: black;
    font-size: 9vh;
    margin-top: 5vh;
/*    margin-left: 3vh;
    margin-right: 3vh; */
    margin-bottom: 12vh;
    line-height: 10vh;
  }
  .dataril {
	color:#000;
  font-size: 5vh;
	margin-top:5vh;
	margin-bottom:5vh;
  padding: 4vh;
  }
  
 .circle
    {
    width:24vh;
    height:24vh;
    border-radius:14vh;
    font-size:4vh;
    color:#000;
    line-height:24vh; 
    text-align:center;
    float:left;
    margin: 3vh;
    }
 .rosino {background:#f2e5dd;}
 .beigino {background:#edebdd;}
 .verdino {background:#ced8c7;}

 .centracirc {
  display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6vh;
	padding-top: 2vh;
/*  margin-bottom: 2.5vw; */
  width: 90vh;
	text-align: center;
/*  position: relative; */
/*  top: 80vh; 
  left: 40vh;
  right: 40vh; */
/*  transform: translate(0%, -50%); */
  bottom: 6vh;
  }
}

@media screen and (max-width: 1024px) {   
  .titolo_principale {
    margin-top: 3vh;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .big {
    color: black;
    font-size: 8vw;
    margin-top: 5vh;
/*    margin-left: 3vh;
    margin-right: 3vh; */
    margin-bottom: 12vh;
    line-height: 7.3vw;
  }
  .dataril {
	color:#000;
  font-size: 3vw;
	margin-top:4vw;
	margin-bottom:4vw;
  padding: 4vw;
  }
  
 .circle
    {
    width:18vw;
    max-width: 24vh;
    height:18vw;
    max-height: 24vh;
    border-radius:9vw;
    font-size:3.3vw;
    color:#000;
    line-height:18vw;
    text-align:center;
    float:left;
    margin: 2vw;
    }
 .rosino {background:#f2e5dd;}
 .beigino {background:#edebdd;}
 .verdino {background:#ced8c7;}

 .centracirc {
 /* border: solid black; */
  display: block;
	margin-left: auto;
	margin-right: auto;
/*  margin-bottom: 2.5vw; */
  width: 66vw;
  max-width: 100vh;
/*	max-width: 66%; */
	text-align: center;
  position: absolute;
/*  top: 80vh; */
  left: 18vw;
  right: 18vw;
/*  transform: translate(0%, -50%); */
  bottom: 9vh;
  }
}

.titolo_principale strong {
    font-weight: 900;
 }

.titolo_secondario {
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
 }
/*  .titolo_secondario h3 {
    margin-top: 0px;
    margin-bottom: 0px;
 }
*/
 .circle:hover {
   font-weight: 700;
   color: #08b;
 }
 .dataril a {
   text-decoration: none;
   color: #000;
 }
  .dataril a:hover {
   font-weight: 700;
   color: #08b;
 }
 .dataril a:active {
   text-decoration: underline;
   color: #08b;
 }
 .illattr {
 	display: block;
 	float: right;
 	color: #222 !important;
	font-size: 11px;
	writing-mode: vertical-lr;
	padding: 0.8vw;
    text-orientation: sideways;
    transform: rotate(180deg);
    z-index: 100;
	text-decoration: none;
 }
 .illattr:hover {
   color: #08b !important;
 }
  .illattr:active {
   font-weight: 700;
   color: #08b !important;
 }
  .illccby {
	display: block;
	height: 1vw;
	position: absolute; 
		left: 30px; 
		bottom: 30px;
	float: bottom-left;
	padding: 08.vw;
	z-index: 100;
/*	color: black; */
 }
  .illccby:hover {
	color: #08b !important;
/*	background-color: #c90; */
 }
 .illccby img {
	 color: black;
	 height: 16px;
 } 
 .illccby img:hover {
	 color: #08b !important;
	 height: 16px;
 }
/* ============= sezione 1 - edifici ============= */
.containeredif {
/*  border: solid black; */
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.containeredif a {
/*  border: solid black; */
  display: block;
  text-decoration: none;
  color: black;
}
.containeredif a:hover {
  background-color: #111;
  color: white;
}

.captionedif {
/*  border: solid black; */
  margin-top: 0px;
  padding-top: 0px;
}

@media screen and (min-width: 768px) and (orientation: landscape) {
  .containeredif {
    width: 124vh;
    max-width: 100vw;
    column-count: 3;
    flex-direction: row;
  }

  .containeredif a {
    border-top: 0px;
    font-size: 16px;
    color: black;
  }
  .imagedif {
  width: 40vh;
  height: 40vh;
  /* padding: t r b l */
  padding: 0.5vh 0.5vh 0vh 0.5vh;
  }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  .containeredif {
    width: 96vw;
    max-height: 98vh;
    flex-direction: column;
    column-count: 2;
  }
  .containeredif a {
    max-width: 42vw;
      color: black;
/*    margin: 10px auto; */
  }
  .imagedif {
  width: 44vw;
  max-width: 23.3vh
  height: 44vw;
  max-height: 23.3vh
  }
}
/* ============= sezione 2: mappa ============= */
 #map {
  width: 100%;
  height: 95vh;
  overflow: hidden;
}
/* ============= sezione 3: ricerca con autocompletamento ============= */
   span.piustretto {
   width: 90%;
      margin-left: 5%;
      margin-right: 5%;
    }
    div.scelta {
      position: relative;
      margin: auto;
      width: 98%;
    /*  border: 2px solid red; */
    }
    div.rassegna {
      margin: 5px;
    /*  border: 1px solid #ccc; */
      border-bottom: 1px solid black;
      float: left;
      width: 180px;
      max-width: 46%
      height: 310px;

    /*  min-height: 320px; */ 
      display: flex;
      position: relative;
    }
    
    div.rassegna:hover {
    /*  border: 2px solid #777; */
    background-color: black;
    color: white;
    }
    
    div.rassegna img {
      width: 100%;
      height: auto;
    }
    div.rassegna a {
      color: black;
      text-decoration: none;
    }
    div.rassegna a:link {
      color: black;
      text-decoration: none;
    }
    div.rassegna a:visited {
      color: grey;
    text-decoration: none;
    }
    div.rassegna a:hover {
        color: white;
      text-decoration-line: underline;
        text-decoration-style: dotted;
    }
    div.rassegna a:active {
        color: white;
        text-decoration-line: underline;
        text-decoration-style: dotted;
    }
    div.indirizzo {
      position: absolute;
      top: 235px;
      padding: 12px;
      align-self: flex-end;
      font-size: 85%;
      text-align: center;
      text-transform: capitalize;
    }
    /* -- per immissione ricerca -- */
        input[type="text"] {
          padding: 10px;
          font-size: 16px;
          border: 1px solid #ccc;
          width: 300px;
    }
    .boxImg {
			height: 150px; 
		/*	max-width: 46%; */
		}
 /* ======================= pannello laterale =============== */
 #schPanel {
	position: fixed;
	z-index: 10;
	top:0;
	right: -700px; 
	width: 700px;
  max-width: 100%;
	height: 100%;
	background-color: rgba(250, 250, 250);
	transition: all 0.3s ease-in-out;
}
#schPanel.open {
   right: 0;
   transition: all 0.3s ease-in-out;
   overflow-y: auto;
}