h2 {
  display: block;
	color: black;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
#button {
	background-color: /* Green */
none;
	border: orchid;
	border-radius: 0%;
	border-color: #e32b21;
	background-color: black;
	padding: 0.20%;
	text-decoration: none;
	cursor:pointer;
	transition: width 0.5s;
}

#button:hover {
	width=100%;
	padding: 0.5%;
	background-color: orange;
	transition: 0.5s;
	box-sizing:10px;
}

/* zoomIn */
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }
@-moz-keyframes zoomIn {
  0% {
    opacity: 0;
    -moz-transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }
@-o-keyframes zoomIn {
  0% {
    opacity: 0;
    -o-transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.u--zoomIn:hover {
  -webkit-animation: zoomIn 10s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-animation: zoomIn 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-animation: zoomIn 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: zoomIn 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

img {
  opacity: 1000
}

/* Flash */
@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }
@-moz-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }
@-o-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }
  25%, 75% {
    opacity: 0; } }

.u--flash:hover {
  -webkit-animation: flash 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-animation: flash 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-animation: flash 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: flash 2s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

/* Swing */
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg); } }
@-moz-keyframes swing {
  20% {
    -moz-transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -moz-transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -moz-transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -moz-transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -moz-transform: rotate3d(0, 0, 1, 0deg); } }
@-o-keyframes swing {
  20% {
    -o-transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    -o-transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    -o-transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    -o-transform: rotate3d(0, 0, 1, -5deg); }
  100% {
    -o-transform: rotate3d(0, 0, 1, 0deg); } }
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 2deg); }
  30% {
    transform: rotate3d(0, 0, 1, -2deg); }
	40% {
    transform: rotate3d(0, 0, 1, 2deg); }
  50% {
    transform: rotate3d(0, 0, 1, -2deg); }
		60% {
    transform: rotate3d(0, 0, 1, 2deg); }
  80% {
    transform: rotate3d(0, 0, 1, -2deg); }
  100% {
    transform: rotate3d(0, 0, 1, 0deg); } }

.u--swing:hover {
  -webkit-transform-origin: top center;
  -moz-transform-origin: top center;
  -o-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation: swing 10s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-animation: swing 10s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-animation: swing 10s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: swing 10s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

// Slide Left
//--------------------------------//
@-webkit-keyframes slideLeft {
  0% { -webkit-transform: translate3d(-100%, 0, 0);}
  100% {-webkit-transform: none;}
}
@-moz-keyframes slideLeft {
  0% {-moz-transform: translate3d(-100%, 0, 0);}
  100% {-moz-transform: none;}
}
@-o-keyframes slideLeft{
  0% {-o-transform: translate3d(-100%, 0, 0);}
  100% {-o-transform: none;}
}
@keyframes slideLeft {
  0% {transform: translate3d(-100%, 0, 0);}
  100% {transform: none;}
}

.u--slideLeft {
  -webkit-animation: slideLeft $ANIMATION_DURATION;
  -moz-animation:    slideLeft $ANIMATION_DURATION;
  -o-animation:      slideLeft $ANIMATION_DURATION;
  animation:         slideLeft $ANIMATION_DURATION;
}

@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');

section{
  
}

section .container{
  margin: 30px;
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

/* Shake */
@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-1vw, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(1vw, 0, 0); } }
@-moz-keyframes shake {
  0%, 100% {
    -moz-transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -moz-transform: translate3d(-1vw, 0, 0); }
  20%, 40%, 60%, 80% {
    -moz-transform: translate3d(1vw, 0, 0); } }
@-o-keyframes shake {
  0%, 100% {
    -o-transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -o-transform: translate3d(-1vw, 0, 0); }
  20%, 40%, 60%, 80% {
    -o-transform: translate3d(1vw, 0, 0); } }
@keyframes shake {
  0%, 100% {
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-1vw, 0, 0); }
  20%, 40%, 60%, 80% {
    transform: translate3d(1vw, 0, 0); } }

.u--shake:link {
  -webkit-animation: shake 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-animation: shake 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-animation: shake 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation: shake 2s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

/* (A) OUTER CONTAINER */
.hwrap {
  /* (A1) DIMENSIONS */
  width: 100%;
  height: auto-flow; /* OPTIONAL */

  /* (A2) COSMETICS */
  background: #fffdea;
  border: 2px solid #EEE8AA;
	border-radius:5%;
  overflow: hidden; /* HIDE SCROLLBARS */
}

/* (B) MIDDLE CONTAINER - FLEX LAYOUT */
.hmove {
  display: flex;
  position: relative;
  top: 0; right: 0;
}

/* (C) SLIDES - FORCE INTO ONE LONG HORIZONTAL ROW */
.hslide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 25px;
}

/* (D) SLIDE ANIMATION */
@keyframes slideh {
  /* (D0) THE IDEA - USE KEYFRAMES TO SHIFT SLIDES *
  0% { right: 0; }
  33% { right: 100%; }
  66% { right: 200%; }
  100% { right: 0; }
 
  /* (D1) BUT THE ABOVE WILL SHIFT NON-STOP */
  /* SO WE ADD PAUSES BETWEEN EACH SLIDE */
  0% { right: 0; }
  30% { right: 0; }
  33% { right: 100%; }
  63% { right: 100%; }
  66% { right: 200%; }
  97% { right: 200%; }
  100% { right: 0; }
}
.hmove { animation: slideh linear 20s infinite; }
.hmove:hover { animation-play-state: paused; }


table td {
  padding: .625em;
  text-align: center;
}

table td {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

.site-footer .widget-area {
	background-color: #fff;
	padding-bottom: 2em;
	padding-top: 4em;
}

        .centered-text {
            text-align: center;
            margin: 40px 0; /* Spazio superiore e inferiore */
        }
        .highlight {
            font-weight: bold;
        }
        .large-text {
            font-size: 1.2em; /* Dimensione del testo aumentata */
        }
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: auto;
        }
        h2 {
            color: #A52A2A;
            text-align: center;
            font-size: 2em;
        }
        h3 {
            text-align: center;
            font-size: 1.5em;
            margin: 20px 0;
        }
        p {
            margin: 20px 0;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            display: block;
            margin: 0 auto;
        }
        .image-right {
            float: right;
            margin: 5px 0 5px 15px;
        }
        .highlight {
            font-weight: bold;
        }
        .large-text {
            font-size: 1.2em;
        }
        .centered {
            text-align: center;
            margin: 20px 0;
        }