body {
	margin: 0;
	padding: 0;
	font-family: 'EB Garamond', serif;
	line-height: 1.25;
}

@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/eb-garamond-v32-latin-regular.woff2') format('woff2'),
	url('/fonts/eb-garamond-v32-latin-regular.woff') format('woff');
}

@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/eb-garamond-v32-latin-italic.woff2') format('woff2'),
         url('/fonts/eb-garamond-v32-latin-italic.woff') format('woff');
}

@font-face {
	font-family: 'EB Garamond';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/eb-garamond-v32-latin-700.woff2') format('woff2'),
	url('/fonts/eb-garamond-v32-latin-700.woff') format('woff');
}

@font-face {
	font-family: 'EB Garamond';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('/fonts/eb-garamond-v32-latin-700italic.woff2') format('woff2'),
	url('/fonts/eb-garamond-v32-latin-700italic.woff') format('woff');
}

@font-face {
	font-family: 'Fira Sans Project';
	src: url('../fonts/fira-sans-v18-latin-regular.woff2') format('woff2'),
	url('../fonts/fira-sans-v18-latin-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans Project';
	src: url('../fonts/fira-sans-v18-latin-italic.woff2') format('woff2'),
	url('../fonts/fira-sans-v18-latin-italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans Project';
	src: url('../fonts/fira-sans-v18-latin-700.woff2') format('woff2'),
	url('../fonts/fira-sans-v18-latin-700.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Sans Project';
	src: url('../fonts/fira-sans-v18-latin-700italic.woff2') format('woff2'),
	url('../fonts/fira-sans-v18-latin-700italic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}


.h1-seo {  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;  }
.headline {  font-size: 3rem; font-weight: 700; margin: 0px; padding: 0 10px;  }
h1 {  font-size: 3rem; font-weight: 700; margin: 0px; padding: 0 10px;  }
h2 {  font-size: 1.75rem; font-weight: 400; margin: 0; padding: 0 10px;  }
h3 {  font-size: 1.25rem; font-weight: 400; margin: 0; padding: 0 10px;  }
p {  font-size: 1rem; font-weight: 400; margin: 0; padding: 0 10px;  }
small {  font-size: 0.875rem; font-weight: 400; opacity: 0.8;  }
.bold {  font-weight: 700;  }
.italic {  font-style: italic;  }

.fira {  font-family: 'Fira Sans Project', sans-serif; font-size: 1rem; line-height: 1.25;  }
.fira b {  font-weight: 700;  }

.box {  padding: 0;  margin: 0; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center;  }

@media (min-width: 768px) {
	.griglia {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 0;
		max-width: 1200px;
		margin: 0px auto;
		padding: 0;
		}
.logo-cont, .logo-cont img, .tag-cont {  display: none;  }
nav ul {  list-style-type: none; margin: 0; padding: 22px 0;  }
nav li {  display: inline-block; padding: 10px 0; margin: 0; font-size: 1.1rem;  }
nav ul li a {  text-decoration: none; color: #1e3f3f;  padding: 10px 10px; font-weight: 700;  }
nav ul li a:hover {  background-color: #1e3f3f; border-radius: 5px; color: white;  }
	.pulsante {  display: none;  }
.full {  height: 36px;  }
.titoloNews {  padding-top: 50px;  }
.recapiti {  padding-left: 40px;   }
#language-switcher {  position: fixed; left: 0; top: 50%; -webkit-transform: translate(-100%, -50%); z-index: 1100;  }

}

nav {  position: fixed; z-index: 1000;  }

@media (max-width: 767px) {
#menuNavigazione {  position: fixed; top: 0; left: 0; width: 70%; height: 100dvh; overflow-y: auto; background-color: #1e3f3f; transform: translateX(calc(-100% - 1px)); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column;  }

	.logo-cont {  margin: 0; padding: 0;  height: 100%; display: flex; justify-content: center; align-items: flex-end;  }
	.logo-menu {  width: 50px; height: auto; padding: 20px;  }
	.tag-cont {  margin: 0; padding: 20px; text-decoration: none; color: #ebe0d7; height: 100%;  }
	.tag-cont a {  text-decoration: none; color: #ebe0d7;  }

nav ul {  list-style-type: none; margin: 0; padding: 0;  }
nav li a {  display: block; padding: 10px 65px; margin: 0; font-size: 1.1rem; text-align: left; font-weight: 700;  }
nav ul li a {  text-decoration: none; color: #f4ab8a; margin: 0;  }
nav ul li a:hover {  color: white;  }
#menuNavigazione.menu-aperto {  transform: translateX(0); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);  }

	.pulsante {  background: none; border: none; cursor: pointer; width: 70px; height: 70px; padding: 0; margin-right: 10px; position: relative; outline: none;  }

	.barra-centrale {  display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 5px; background-color: #1e3f3f;
	transition: transform 0.3s, opacity 0.3s, background-color 0.3s 0.1s;  }

        .barra-centrale::before, .barra-centrale::after {  content: ''; position: absolute; left: 0; width: 100%; height: 5px; background-color: #1e3f3f;
	transition: transform 0.35s ease, top 0.35s ease;  }

        .barra-centrale::before {  top: -10px;  }
	.barra-centrale::after {  top: 10px;  }

	.pulsante.on .barra-centrale {  background-color: transparent;  }
	.pulsante.on .barra-centrale::before {  top: 0; transform: rotate(45deg);  }
        .pulsante.on .barra-centrale::after { top: 0; transform: rotate(-45deg);  }
.full {  height: 26px;  }
.recapiti {  display: none;  }
#language-switcher {  position: fixed; left: 0; top: 60%; -webkit-transform: translate(-100%, -50%); z-index: 1100;  }
}

header {  background-color: #1e3f3f; width: 100%; padding: 0; margin: 0;  }
img {  pointer-events: none;  }
.logo {  height: 90px; width: auto; margin-top: 5px;  }
.logo-txt {  height: auto; width: 100%;  }

.logo-nav {  opacity: 0; max-height: 0; transition: opacity 0.3s, max-height 0.3s;  }
#mainNav.is-sticky .logo-nav {  opacity: 1; max-height: 60px; margin-left: 30px; vertical-align: middle;  }

nav {  background-color: #f4ab8a; width: 100%; padding: 0; margin: 0; position: sticky; top: 0; box-shadow: 0px -8px 15px -5px rgba(0, 0, 0, 0.35), 0px 8px 15px -3px rgba(0, 0, 0, 0.4);  }

.full {  background-color: #1e3f3f; width: 100%; padding: 0; margin: 0;  }
.s100 {  width: 100%; height: 370px; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/imm/sbarco-litorale-anzio.webp'); background-size: cover; background-position: center center; text-align:center; overflow: hidden;  }
.s200 {  width: 100%; background-color: #1e3f3f; overflow: hidden;  }

        .pulsanteB {  border: none; background-color: #ebe0d7; color: #1e3f3f; text-decoration: none; padding: 10px; cursor: pointer; font-size: 1.1rem; font-family: 'EB Garamond'; font-weight: 600; border-radius: 8px;
	width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;  }
        .pulsanteB:hover {  background-color: #d8c6b9; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);  }
        .pulsanteB:active {  background-color: #c3af9f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; transform: translateY(2px);  }

.s300 {  width: 100%; background-color: #f4ab8a; color: #1e3f3f; padding: 10px 0 20px; overflow: hidden;   }
.s400 {  width: 100%; background-color: #1e3f3f; overflow: hidden;  }
.s500 {  width: 100%; background-color: #f4ab8a; color: #1e3f3f; padding: 10px 0 20px; overflow: hidden;   }
.s600 {  width: 100%; background-color: #1e3f3f; overflow: hidden;  }
figure {  margin: 0; padding: 0;  }

	.sottogriglia-responsive {  display: grid; gap: 20px; padding: 20px; width: 100%;  }

	.sottogriglia-max-4 {  grid-template-columns: repeat(4, 1fr);  }
	.sottogriglia-max-3 {  grid-template-columns: repeat(3, 1fr);  }
	.sottogriglia-max-2 {  grid-template-columns: repeat(2, 1fr);  }

	@media (min-width: 768px) and (max-width: 991px) {  .sottogriglia-responsive, .sottogriglia-max-4, .sottogriglia-max-3, .sottogriglia-max-2 {  grid-template-columns: repeat(2, 1fr);  } }
	@media (max-width: 767px) {  .sottogriglia-responsive, .sottogriglia-max-4, .sottogriglia-max-3, .sottogriglia-max-2 {  grid-template-columns: repeat(1, 1fr);  }  }

	.item-sottogriglia {  padding: 15px; text-align: center;  }

.s700 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }
.s800 {  width: 100%; padding: 20px 0; background-color: #f4ab8a; overflow: hidden;  }
.s900 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }
.s1000 {  width: 100%; height: 376px; background-image: url('/imm/ingresso-museo-sbarco-anzio.webp'); background-size: cover; background-position: center center; text-align:center; overflow: hidden;  }

        .pulsanteV {  border: none; background-color: #1e3f3f; color: #f4ab8a; text-decoration: none; padding: 10px; cursor: pointer; font-size: 1.1rem; font-family: 'EB Garamond'; font-weight: 600; border-radius: 8px;
	width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;  }
        .pulsanteV:hover {  background-color: #152c2c; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);  }
        .pulsanteV:active {  background-color: #0b1a1a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; transform: translateY(2px);  }

.s1100 {  width: 100%; background-color: #1e3f3f; overflow: hidden;  }

form {  padding: 20px; font-family: 'EB Garamond', serif; color: #ebe0d7;  }
label {  line-height: 30px;  margin-left: 10px;  }
input {  -webkit-appearance: none; appearance: none; box-sizing: border-box; border: none; width: 100%; height: 40px; margin-bottom: 10px; padding: 0 10px;  border-radius: 8px; font-family: 'Fira Sans Project';  font-size: 1rem;  }
textarea {  -webkit-appearance: none; appearance: none; box-sizing: border-box; border: none; width: 100%; margin-bottom: 25px; padding: 10px 10px;  border-radius: 8px; font-family: 'Fira Sans Project';  font-size: 1rem;  }


        .pulsanteA {  border: none; background-color: #f4ab8a; color: #1e3f3f; text-decoration: none; padding: 10px; cursor: pointer; font-size: 1.1rem; font-family: 'EB Garamond'; font-weight: 600; border-radius: 8px;
	width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: inline-block; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;  }
        .pulsanteA:hover {  background-color: #c98e72; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);  }
        .pulsanteA:active {  background-color: #a3715b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset; transform: translateY(2px);  }

.s1200 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }
.s1300 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }
.s1400 {  width: 100%; background-color: #1e3f3f; overflow: hidden;  }
.s1500 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }
.s1600 {  width: 100%; background-color: #ebe0d7; overflow: hidden;  }

        .message {  padding: 12px; margin: 20px; border-radius: 4px; border: 1px solid; text-align: center;  }
        .success {  background-color: #d4edda; color: #155724; border-color: #c3e6cb;  }
	#cognome, label[for="cognome"] {  display: none; position: absolute; left: -9999px; top: 0; overflow: hidden;  }
        .error {  background-color: #f8d7da; color: #721c24; border-color: #f5c6cb;  }
        .spinner { display: inline-block; width: 1em; height: 1em; vertical-align: middle; border: 0.15em solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin 0.75s linear infinite;  }
	button:disabled {  opacity: 0.8; cursor: not-allowed; background-color: #1abc9c;  }
	@keyframes spin {  to { transform: rotate(360deg); }  }

.storia1 {  float: left; width: 35%; margin: 0 15px 5px 0; padding: 10px; border: 1px solid #ddd; box-shadow: 2px 2px 5px rgba(0,0,0,0.1);  }
.storia1 img {  width: 100%; height: auto; display: block;  }
.storia1 figcaption {  font-size: 0.9em; text-align: center; padding: 5px 0 0 0; color: #555;  }

        #current-language {  background-color: #f4ab8a; color: #1e3f3f; border: 0; padding: 0 30px; box-shadow: 0px -5px 2px rgba(0,0,0,0.2); cursor: pointer; font-family: 'EB Garamond'; font-weight: 700; border-radius: 8px 8px 0 0; transition: background-color 0.2s; display: flex; align-items: center; -webkit-transform-origin: 100% 50%; -webkit-transform: rotate(90deg) translate(50%, -50%);  }
	#current-language:hover {  background-color: #ebe0d7;  }
        #current-language img {  width: auto; height: 14px; margin-right: 5px; padding: 0; border: 1px solid #ebe0d7; border-radius: 20%;  }
        #language-menu {  list-style: none; padding: 0; margin: 0; position: absolute; top: 50%; left: 100%; background-color: white; border: 1px solid #ebe0d7; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); border-radius: 4px; display: none; opacity: 0; pointer-events: none; transition: opacity 0.3s; -webkit-transform: translate(16px, -50%);  }
	#language-menu li a {  display: flex; align-items: center; padding: 8px 12px; text-decoration: none; white-space: nowrap; color: #1e3f3f; border-bottom: 1px solid #ebe0d7;  }
	#language-menu li:last-child a {  border-bottom: none;  }
	#language-menu li a:hover {  background-color: #f5f5f5;  }
	#language-menu img {  width: 20px; height: auto; margin-right: 2px; border: 1px solid #ebe0d7; border-radius: 20%;  }
	.menu-open #language-menu {  display: block; opacity: 1; pointer-events: auto;  }
	@media (pointer: fine) {  #language-switcher:hover #language-menu {  display: block; opacity: 1; pointer-events: auto;  }  }