body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif}
	.w3-bar,h1,button {font-family: "Montserrat", sans-serif}
	.fa-anchor,.fa-coffee {font-size:200px}
	.mySlides {display:none;}

body{  
	background-image: url(../img/sfondo.webp);
	font-size: 16px;
}

.topnav {
  overflow: hidden;
  background-color:#FCCFAE;
  padding-left:30px;
}

.topnav a {
  float: left;
  display: block;
  color: brown;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 16px;
}

.active {
  background-color: inherit;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;    
  border: none;
  outline: none;
  color: brown;
  padding: 10px 22px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: visible;
}

.dropdown-content a {
  float: none;
  color: brown;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: brown;
  color: white;
}

.dropdown-content a:hover {
  background-color: brown;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* ===== SOTTOMENU TEATRO ===== */
.dropdown-sub { position: relative; width: 100%; overflow: visible; }
.dropbtn-sub {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 16px;
  color: brown;
  font-family: inherit;
}
.dropbtn-sub:hover { background-color: brown; color: white; }
.dropdown-content-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1001;
}
.dropdown-content-sub a {
  float: none;
  color: #DC143C;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content-sub a:hover { background-color: #8B0000; color: white; }
.dropdown-sub:hover .dropdown-content-sub { display: block; }

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav {
    background-color:#FFE4B5;
    border-bottom: 1px solid red;
    padding-left:1px;
  }
}

@media screen and (max-width: 768px) {
  .topnav.responsive { position: relative; }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown { float: none; }
  .topnav.responsive .dropdown-content { position: relative; }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  /* Su mobile il sottomenu si apre inline */
  .dropdown-content-sub {
    position: relative;
    left: 0;
    box-shadow: none;
    padding-left: 16px;
  }
  .dropdown-sub:hover .dropdown-content-sub { display: none; }
}

@media screen and (max-width: 700px) {
  .divPrin {
    margin: 40px 6px 40px 6px;
  }
  .main {
    padding-left:10px;
    padding-right:10px;
  }			
}
@media screen and (min-width: 700px) {
  .divPrin {
    margin: 55px;
  }
  .main {
    padding-left:30px;
    padding-right:30px;
  }		
}
	
.divPrin {
  background-color:#FCCFAE; 
  padding-bottom:16px;	
}

.aboutme {
  float:right!important;
}
@media screen and (max-width: 768px) {	
  .aboutme {
    float:left!important;
  }	
}	
		
/***************
 * layout pagine 
 * *************/

#myHeader {
  color:red;
  border-bottom: 1px solid brown;
  padding-top:32px;
  padding-right:32px;	
  padding-bottom:32px;
}   
#mySubTitle {
  color:red;
  font-size:16px;
} 
#myIntro {
  color:red;
  font-size:16px;
  text-align: justify;
  padding-top:20px;
  padding-right:20px;
  padding-left:32px;	
} 

hr, #pagina3, #pagina4, #pagina5, #pagina6, 
#pagina7, #pagina8, #pagina9, #pagina10, #pagina11 {
  display:none;
}

#settimana {
  text-align: right;
  color:red;
}

/* ============================================================
   TEMPLATE SPETTACOLI
   ============================================================ */
.brb-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}
.brb-left  { flex: 1 1 35%; min-width: 260px; }
.brb-right { flex: 1 1 60%; min-width: 280px; }

.brb-top-row { display: flex; gap: 10px; margin-bottom: 16px; }
.brb-top-row img { width: 50%; object-fit: cover; }

.brb-locandina { width: 100%; margin-bottom: 16px; }
.brb-full      { width: 100%; margin-bottom: 16px; }

.brb-slideshow { width: 100%; max-width: 600px; position: relative; }
.brb-slideshow img { width: 100%; height: 300px; object-fit: cover; }

.brb-right p  { text-align: justify; margin-bottom: 12px; }
.brb-right h3 { color: #8B0000; margin: 16px 0 6px; }

.hint { font-size: 0.88rem; color: #888; font-style: italic; margin-bottom: 8px; }

.testo-contenitore { max-height: 120px; overflow: hidden; transition: max-height 0.4s ease; }
.testo-contenitore.espanso { max-height: 2000px; }

.storia-contenitore { transition: max-height 0.4s ease; overflow: hidden; }
#btnStoriaPiu, #btnStoriaMeno { display: none; }

.btn-arancio {
  display: inline-block;
  padding: 8px 20px;
  background-color: #ff9800;
  color: white;
  font-weight: normal;
  font-style: normal;
  border: 1px solid #c4803a;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 16px;
}
.btn-arancio:hover { background: #e68900; }

@media (max-width: 768px) {
  .brb-left  { order: 2; }
  .brb-right { order: 1; }
  .storia-contenitore { max-height: 120px; }
  .storia-contenitore.espanso { max-height: 5000px; }
  #btnStoriaPiu  { display: inline-block; }
  #btnStoriaMeno { display: none; }
}
@media (max-width: 600px) {
  .brb-slideshow img { height: 200px; }
}