/* =========================
   RESET
========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
	height: 100%;
    font-family: Arial, sans-serif;
}

/* =========================
   HEADER
========================= */
header {
	position: relative;
	height: 10vh;
    background: #fff;
    display: flex;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); 	/* ombra inferiore */
    z-index: 10;
}

/* due parti uguali */
.header-left,
.header-right {
    width: 50%;
    display: flex;
    align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.header-left img {
    height: 60%;
}

.header-right {
    justify-content: right;
}

/* =========================
   MAIN LAYOUT
========================= */
main {
    display: flex;
    height: 75vh; /* 100vh - header(10vh) - footer(15vh) */
	background: #e0e0e0;
}

/* ========================= COLONNE */
.col {
    height: 100%;
	display: flex;
    justify-content: center;
    align-items: flex-end; /* container in basso */
}

.col.left,
.col.right {
    width: 25%;
}

.col.center {
    width: 50%;
}

.col.right .switch {
	margin-top: auto;
    margin-bottom: 10px;
}

/* ========================= CONTAINER */
.container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========================= SLIDES */
.slides {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    margin-bottom: 0;
    transition: margin-bottom 0.4s ease;
    overflow: hidden;
}

/* immagini dello slideshow */
.slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================= DYNALINKS */
.DynaLinks {
    width: 100%;
    display: none;
    margin-top: 10px;
	justify-content: center;
    gap: 20px;
}

.suggestion {
	white-space: nowrap;
	cursor: pointer;
	font-size: 20px;
	font-style: normal;
}
.suggestion:hover,
.suggestion.active {
	background: #e3f0ff;
}

a {
	font-style: normal;
	font-size: 14px;
	text-decoration: none;
}

/* =========================
   SWITCH
========================= */
.switch {
  position: relative;
  display: inline-block;
  width: 45px; /* 60 * 0.75 */
  height: 25.5px; /* 34 * 0.75 */
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 25.5px; 						/* arrotondato come altezza */
}

.slider:before {
  position: absolute;
  content: "";
  height: 19.5px; width: 19.5px; 				/* 26 * 0.75 */
  left: 3px; bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #0b2540;					/* switch ON blu scuro */
}

input:checked + .slider:before {
  transform: translateX(19.5px); 				/* spostamento proporzionale */
}

/* =========================
   FOOTER
========================= */
footer {
    margin: 0;
	height: 15vh;
    background: #0b2540;						/* blu scuro */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.footer-box {
    width: 50%;
    margin-top: 0px;
}

.footer-box input {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 0;
    outline: none;
    color: #000;
    background: #fff;
    font-size: 25px;
	font-style: normal;
}

/* Placeholder corsivo compatibile su tutti i browser moderni */
.footer-box input::placeholder {
    font-style: italic;
    color: #999;
}

/* Prefissi WebKit per Chrome, Opera, Edge, Safari */
.footer-box input::-webkit-input-placeholder {
    font-style: italic;
    color: #999;
}

/* Firefox */
.footer-box input::-moz-placeholder {
    font-style: italic;
    color: #999;
}

/* =========================
   MOBILE
========================= */
@media screen and (orientation: portrait) {

	.col.center {
		width: 100%;
	}

	.col.left,
	.col.right {
		display: none;
	}

}