/*SCRITTE*/
h1{
	font-family: Sans-serif; 
	font-size:100pt; 
	color: #000000;
	text-align: center;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;}
h2{
	font-family: Sans-serif; 
	font-size:150pt; 
	color: #000000;
	text-align: center;
	margin: 0;
	padding: 0;}
h3{
	font-family: Sans-serif;
	font-size: 15pt;
	color:#000000;
	margin: 0 auto;
	padding: 0;}
p{
	font-family: Sans-serif; 
	font-size:15pt; 
	color: #000000;
	margin: 0.3em;
	padding: 5px;
	line-height: 28px;
	text-align: left;}
	
/*MAIN*/
main {
	flex: 1;
	width: 100%;
	margin: 0 auto;}
/*tabella*/
.tour{
	width: 100%;
	border-collapse: collapse;
	font-family: Sans-serif;
	margin: auto;}
.tour th{
	border-top: 1px solid;
	text-align: left;
	padding: 5px;}
.tour td{
	padding: 5px;
	border-bottom: 1px solid}
/*reset base*/
* {
	box-sizing: border-box;}
/*link mail*/
#mail {
	font-family: "Times New Roman";
	font-size: 12pt;
	text-decoration: underline;
	color: black;}
#mail:hover {
	color: grey;}
/*contenitore*/
#contenitore {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;}
/*sezione colonna sinistra*/
#booking {
	width: 60%;}
/*sezione colonna destra*/
#colonna-2 {
	width: 40%;}
/*form*/
.form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 500px;}
/*riga nome e cognome*/
.row {
	display: flex;
	gap: 10px;}
/*campi obbligatori*/
.nome,
.cognome,
.email,
.messaggio {
	display: flex;
	flex-direction: column;
	width: 100%;}
/*righe dei campi*/
input, 
textarea {
	width: 100%;
	padding: 8px;
	margin-top: 5px;}
/*bottone invio*/
.tasto-email {
	align-self: flex-end;}

/*SPOTIFY SINGOLI*/
iframe{
	border-radius:12px;
	width:100%;
	height:1450px;
	border: none;}

/*ANIMAZIONE*/
.contenitore-animato{
	width: 100%;
	overflow: hidden;}
			
.loader {
	display: flex;
	width: max-content;
	animation: muoviADestra 60s linear infinite;}
.loader span{
	white-space: nowrap;
	padding-right: 50px;}

@keyframes muoviADestra {
	from{
	transform: translateX(0);}
	to{ 
	transform: translate(-50%);}
}
	
/*TUTTI I BODY*/
body{
	position: relative;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color:#FFFAF0}
	
/*DIVISORE GALLERIA PER IMMAGINI*/
#gallery{
	max-width: 100%;
	height: auto;}
#gallery img{
	object-fit: cover;}

/*IMMAGINE HOMEPAGE POSIZIONATO AL CENTRO PAGINA*/
#homepage{
	background-image: url("Immagini-Sykos/scritta.png");
	background-position: center;
	background-repeat: no-repeat;}


/*PER TUTTI I NAV DELLE PAGINE*/
nav ul{
	list-style:none;
	padding:0;}
	
nav ul li{
	font-family: Sans-serif;
	display:inline-block;}
	
nav ul li a{
	display:block;
	padding: 10px 20px;
	color:#333;
	text-decoration:none;}
	
nav ul li:hover > ul{
	display:block;}
	
nav ul ul{
	display:none;
	position:absolute;
	background-color:#f2f2f2;}
	
nav ul ul li{
	display:block;}
	
nav ul ul li a{
	padding: 10px 30px;
	color:#333;}
	
nav ul ul li a:hover{
	background-color:#ddd;}


/*SOLO PER LA NAVIGAZIONE*/
#navigazione{
	text-align: center;}

#navigazione ul{
	list-style: none;  
	font-family: "Times New Roman";}

#navigazione li{
	display: inline-block;
	margin: 0.5em 0.2em;
	padding: 0;
	justify-content: center;}

#navigazione a{
	display: block; 
	text-decoration: none; 
	padding: 0.5em;
	font-weight: bold;
	border-radius: 25px;}	
	
.nav-links{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 130px;}
	
.Solo-Logo-Sykos img{
	position: relative;
	width: 50px;
	height: auto;
	float: left;
	margin: 0.5em 60px;
	padding: 0;
	flex-shrink: 0;}

.hamburger {
  display: none;
}

/*PER LINK DELLA NAVIGAZIONE*/
#navigazione a:link, #navigazione a:visited{
	background-color: #9FD7F9;
	color: #FFFAF0; 
	border-right: 5px solid #9FD7F9;}

#navigazione a:hover, #navigazione a:active{ 
background-color: #FFFAF0;
color:#9FD7F9; 
border-right: 5px solid #9FD7F9;}


/*PER IL PIE' DI PAGINA*/
footer{
	clear: both;
	flex-shrink: 0;
	background-color: #FFFAF0;
	color: white;
	text-align: center;
	padding: 0;
	margin-top: auto;}

.footer-links{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;}
.footer-links ul{
	display: inline;
	list-style-type: none;
	list-style: none;}
.footer-links li{
	display: inline;
	color: #fff;
	text-decoration: none;
	margin: 2px;
	padding: 0;}

.pièdipagina{
	clear: both;
	position: relative;
	flex: 1 0 auto;
	width: 100%;
	height: 75px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;}
#pièdipagina-home{
	clear: both;
	position: absolute;
	flex: 1 0 auto;
	width: 100%;
	height: 75px;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;}
/*copyright pie' di pagina*/
.copyright{
	color: black;
	font-family: "Times New Roman";
	text-align: center;
	font-size: 10pt;}


/*rimpicciolimento pagina*/
@media (max-width: 768px) {
	#contenitore {
		flex-direction: column;}
	#booking,
	#colonna-2 {
		width: 100%;}
	#colonna-2 {
		margin-top: 30px;}
	h1{
		font-size: 50pt;}
	h2{
		font-size: 75pt;}

	.row {
		flex-direction: column;}

	.tasto-email {
		width: 100%;}
		
	#navigazione {
		position: fixed;
		top: 0;
		right: -250px; /* uguale alla width */
		width: 250px;
		height: 100%;
		background-color: white;
		transition: right 0.3s ease;
		z-index: 1000;}
	#navigazione.open{
		display: block;
		right: 0;}
	.nav-links {
		list-style: none;
		padding: 20px;}
	.nav-links li {
		margin: 15px 0;}
	.nav-links a {
		display: block;
		padding: 12px;
		background-color: black;
		color: white;
		text-decoration: none;
		text-align: center;
		border-radius: 8px;
		transition: 0.3s;}
	.nav-links a:hover {
		background-color: #333;}
	#navigazione nav {
		display: flex;
		flex-direction: column;
		align-items: center;}
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		display: none;}
	.overlay.active {
		display: block;}
	.hamburger .bar {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: black;
		transition: all 0.3s ease;}
	.hamburger {
		display: block;
		margin-left: auto;
		cursor: pointer;
		z-index: 1100;
		position: relative;
		width: 30px;
		height: 25px;}
		.hamburger .bar:nth-child(1) {
		top: 0;}
	.hamburger .bar:nth-child(2) {
		top: 9px;}
	.hamburger .bar:nth-child(3) {
		top: 18px;}
	.hamburger.active .bar:nth-child(1) {
		transform: rotate(45deg);
		top: 10px;}
	.hamburger.active .bar:nth-child(2) {
		opacity: 0;}
	.hamburger.active .bar:nth-child(3) {
		transform: rotate(-45deg);
		top: 10px;}
}