body{background-color: #333;
font-family:sans-serif;
background-repeat: no-repeat;
height: 100%;
}
#main-box{text-align:center;
}
#corpo{border:1px solid #999;
border-radius: 20px;
text-align:justify;
padding:2%;
color:#000;
background:#f5f5f5;
height: 100%;
}

.flex-container {
display: flex;
margin-top:1em;
}

.button-green {width:30%;
background:#4CAF50;
margin:2% auto;
border:1px solid #000;
padding:3%;
border-radius:10px;
}
.button-green:hover {background-color: #46a049;
}
.button-blue {width:30%;
margin:1% auto;
border:1px solid #000;
border-radius:10px;
padding:2%;
background-image: linear-gradient(#f5f5f5, #900);
}
.button-blue:hover {background: #0b7dda;
}
a,a:link,a:hover{color:#00f;
text-decoration: underline;
}
a:active{color:#f00;
}
.welcome{font-size:150%;
color:#333;
font-weight:bold;
margin:5% 0 0 0;
}
.titolo{font-size:300%;
color:#f5f5f5;
margin-top:5%;
margin-bottom:0;
}
.sottotitolo{font-family:serif;
font-style:italic;
font-size:200%;
color:#f2f2f2;
}
.group{font-size:200%;
color:#333;
font-weight:bold;
text-align:center;
}
#myInput {
    background-image: url('searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
    box-shadow: 2px 2px 10px #333;
    border-radius:10px;
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    margin-top: 0; /* Prevent double borders */
    background-color: #f5f5f5; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: underline; /* Remove default text underline */
    font-size: 100%; /* Increase the font-size */
    color: #00f; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a.header {
    background-color: #999; /* Add a darker background color for headers */
    cursor: default; /* Change cursor style */
}

#myUL li a:hover:not(.header) {
    background-color: #fcc; /* Add a hover effect to all links, except for headers */
}
h1{background-color:#666;
color:#ffc;
padding:1%;
margin:0;
font-size:5vw;
text-align: center;
}
h1.titolo-prima{background:transparent;
}
.underline{text-decoration: underline;
}
#bio-pedia{font-size:75%;
text-align:center;
border-radius:20px;
background-color: #ccc;
padding:2px;
}
.on-line{color:#009;
}
#struttura{margin-left:0;
}
#struttura li{margin: 1%; 0;
}
.home{display: block;
margin:0 auto;
}
#alert{background-color: #f44336;
color:#fff;
margin:1%;
padding:1%;
}
.paypal{text-align:center;
font-size:90%;
color:#c00;
}

div#display{background:#f5f5f5;
box-shadow: 2px 2px 10px #333;
height: 250px;
width:95%;
margin:0 auto;
border: 1px solid #ccc;
overflow-y:scroll;
border-radius:10px;
}

/*Overlay full menu*/
.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: 1; /* 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.5s; /* 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;
  top: 20%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

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

.responsive {
  width: 100%;
  height: auto;
}

.pulsantea{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#fff;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}

.pulsantea:active {
background-color: #ccc;
box-shadow: 1px 1px 3px #333;
}

.pulsanteb{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#ff9;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}
.pulsanteb:active {
background-color: #ffc266;
box-shadow: 1px 1px 3px #333;
}

.pulsantec{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#9f9;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}
.pulsantec:active {
background-color: #33ff33;
box-shadow: 1px 1px 3px #333;
}

.pulsanted{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#9ff;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}
.pulsanted:active {
background-color: #33ffff;
box-shadow: 1px 1px 3px #333;
}

.pulsantee{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#e6e6ff;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}
.pulsantee:active {
background-color: #99f;
box-shadow: 1px 1px 3px #333;
}

.pulsantef{font-size:120%;
color:#000;
font-weight:bold;
text-align:center;
padding:1px;
border:1px solid #ccc;
border-radius:10px;
background-color:#ffccb3;
margin: 5px;
width:20%;
box-shadow: 2px 2px 10px #333;
}
.pulsantef:active {
background-color: #ffaa80;
box-shadow: 1px 1px 3px #333;
}

.pulsantevuoto{
margin: 5px;
width:20%;
}

div.polaroid {max-width:100%;
height:auto;
text-align: center;
margin:5px;
padding: 0;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius:20px;
}

.evidenziatored{color:#f33;
font-weight:bold;
font-size:110%;
}