/* navigation bar */

#menu {
	position: fixed;
	background-color: rgb(255,255,255);
	background-color: rgba(255,255,255, 0.9);
	font-size: 50px;
	border-radius: 5px;
	top:10px;
	left:10px;
	padding: 10px;
	cursor: pointer;
	z-index: 1000;
}

#menu div {
	width: 35px;
	height: 5px;
	background-color: black;
	margin: 6px 0;
	z-index: 1001;
}

.triangle {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 15px solid #818181;
	display: inline-block;
	margin-bottom: 3px;
}

.triangle-up {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 15px solid #818181;
	display: inline-block;
	margin-bottom: 3px;
}

.overlay-content img{
	padding:20px;
}

 /* The Overlay (background) */
 .overlay {
	/* Height & width depends on how you want to reveal the overlay (see JS below) */   
	height: 100%;
	width: 0;
	position: fixed; /* Stay in place */
	z-index: 1002; /* Sit on top */
	left: 0;
	top: 0;
	background-color: rgb(0,0,0); /* Black fallback color */
	background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.2s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
	position: relative;
	width: 100%; /* 100% width */
	text-align: center; /* Centered text/links */
	margin-top: 60px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	margin-bottom: 100px;
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
	padding-block: 20px;
	text-decoration: none;
	font-size: 30px;
	color: #818181;
	display: block; /* Display block instead of inline */
	transition: 0.3s; /* Transition effects on hover (color) */
	cursor: pointer;
	margin: auto;
	user-select: none;
	width: 80vw;
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
	color: #000;
	background-color: #ccc;
	text-decoration: none;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
	position: absolute;
	top: -25px;
	right: 4vw;
	font-size: 100px;
	z-index: 2;
	cursor: pointer;
	color: #818181;
  }
  
  /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
  @media screen and (max-height: 450px) {
	.overlay a {font-size: 20px}
	.overlay .closebtn {
	  font-size: 40px;
	  top: 15px;
	  right: 35px;
	}
  } 

  
  .dropdown {
	margin: auto;
	border: none;
	display: block;
	width: fit-content;
  }

  .dropdown-content {
	display: none;
	min-width: 160px;
	z-index: 1;
	border-bottom: 1px solid #818181;
	border-top: 1px solid #818181;
  }


  .dropdown-content a {
	font-size: 20px;
	color: #818181;
  }
  
  
  .hover-feedback {
      border: 3px solid transparent;
  }
  
  .hover-feedback:hover {
      border: 3px solid black;
      cursor: pointer;
  }
  
  .overlay-contrast p {
      color: white;
      font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  
  .overlay-contrast h1, .overlay-contrast h2, .overlay-contrast h3, .overlay-contrast h4 {
      color: white;
  }

    /*  */

body {
    background-color:rgb(245,250,250);
}

.box-flex {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left:0px auto;
	margin-right:0px auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

.div-responsive {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding: 2%;
	width:100%;
	align-items: flex-start;
}

.div-responsive2 > img {
    margin: auto;
    padding-bottom: 15px;
}

.prossimi-appuntamenti {
	margin: auto;
	border-collapse: collapse;
}

.prossimi-appuntamenti th, .prossimi-appuntamenti td{
	border: 1px solid black;
	text-align: center;
	/*background-color: rgba(255,255,255,.9);*/
	padding: 5px;
}

.prossimi-appuntamenti td {
	border: 1px solid black;
	text-align: left;
}

ul {
	margin: 0;
	padding-left: 15px;
	list-style-position: inside;
}

hr {
    height: 1px;
    width: 70%;
    max-width: 900px;
    background-color: black;
    border-width: 0;
}

.div-responsive p {
    text-align: center;
}

/*
.prossimi-appuntamenti tr:nth-child(odd) {
	background-color: rgba(200,200,200,.5);
}
*/

/*img:hover {
	outline: 4px solid white;
	outline-offset: -2px;
	cursor:pointer;
}*/


.image-medium {
	width: 750px;
	margin: 2px;
}
.image-small {
	width: 560px;
	margin: 2px;
}

.image-smaller {
    width: 500px;
    margin: 2px;
    max-width: 100%;
}

.image-smaller2 {
    width: 450px;
    margin: 2px;
    max-width: 100%;
}

.image-small-v {
    max-height: 750px;
    margin: 2px;
    width: auto;
}

.image-smaller-v {
    max-height: 500px;
    margin: 2px;
    width: auto;
}

.image-smaller-v2 {
    max-height: 400px;
    margin: 2px;
    width: auto;
}

.image-smallest-v {
    max-height: 300px;
    margin: 2px;
    width: auto;
}

.image-smallest {
    width: 340px;
    margin: 2px;
    max-width: 100%;
}

.no-padding {
	padding: 0 !important;
}

.small-padding {
	padding: 2px !important;
}

.small-margin {
	margin-top: 2%;
	margin-bottom: 2%;
}

.small-margin-bottom {
	margin-bottom: 2%;
}

.centered {
	margin: 0px auto;
	padding: 2%;
	text-align: center;
}

.border {
	border: 2px solid black;
}

h3.description {
	margin: 10px;
}

.text-box li {
    padding: 4px 0px;
}

.text-box-center li {
    padding: 2px;
}

.text-box, .text-box-center {
    border: 1px solid black;
    text-align: left;
    display: flex;
    max-width: 800px;
    margin: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding:5px;
}

.text-box-center {
    text-align:center;
}

.text-box-center .image-smallest {
    margin: 10px auto;
}

.text-box-center > ul > li > a > img {
    margin: auto;
}

.yt-video-external {
	margin: 0;
	min-width: 250px;
	flex-grow: 1;
	padding: 5px;
	box-sizing: border-box;
	flex: 1 0 0;
}

.yt-video-external-big {
	width: 100%;
	margin: auto;
	padding: 5px;
	box-sizing: border-box;
}

.yt-video-internal {
	margin: 0px auto;
	padding: 2%;
	padding-top:54.4%;
}

.yt-video-internal-v {
    margin: 0px auto;
	/*padding: 2%;*/
	padding-top:54.4%;
}

@media (max-width: 480px) {
    .yt-video-internal-v {
        padding: 0;
        width: 100%;
    }
    
    .yt-video-internal-v video {
        width: 100%;
        position: relative;
    }
}

.yt-video-iframe, #interventoMariella, #player {
	position:absolute;
	top: 0;
	left: 0;
	bottom:0;
	right: 0;
	width:100%;
	height:100%;
	width:524;
	height:315;
	border: 2px solid black;
	cursor: pointer;
}

.text-black {
        display: inherit;
        margin: 0;
        padding: 2%;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        font-size: 1.25em;
        font-weight: 400;
        letter-spacing: 3px;
        color: #000;
    }
    
    
.text-content {
    align-self: center;
    margin: 20px;
}

.text-content p {
    font-size: 20px;
    padding: 10px;
    margin: 0 auto;
    line-height: 20px;
}

.highlight-article {
    color: #c4c400;
}

video {
    background-color: #777777;
}

/* image resize */

#resize-img_20240103_111032_1, #resize-img_20240103_112406_1 {
	margin:auto;
}

#resize-mostra-30-marzo {
	max-height:61vw;
	width:auto;
}

#resize-articolo {
	max-height:61vw;
	width:auto;
}

#resize-mostra-30-03-2024-00, #resize-mostra-30-03-2024-01{
	width: 94%;
	height: auto;
}

#resize-fabio-durante-e-sergio-rossi {
	max-width:50%;
	min-width:300px;
	height:auto;
	margin: auto;
}

#resize-articolo1 {
	max-width:60%;
	min-width:300px;
	height:auto;
	margin: auto;
}

#resize-opere-grafiche-surrealisti-a-margno {
	width: 98.75%;
}

#resize-manifesto-liberti {
	width: 50%;
	min-width:300px;
}

#resize-i1 {
	max-height: 700px;
	width: auto;
}

#resize-i2 {
	max-height: 700px;
	width: auto;
}

#resize-i3 {
	max-height:700px;
	width: auto;
}

#resize-i4 {
	max-height:700px;
	width: auto;
}

#resize-risposta-sindaco {
	max-width:700px;
	min-width: 100px;
}