@media only screen
and (max-width : 900px) {

	#info-wrap{




	position: absolute!important;
	flex-direction: column!important;
	overflow: scroll!important;
}

.info-text{
	width: auto!important;
}

.landscape{
	width: 100px!important;
}

.portrait{
	width: 80px!important;
}

.description{
	width: 100%;
	height: auto!important;
	transform: translate(0,0)!important;
	background: none!important;



}

.cartolina-image-landscape {
	width: 80%!important;

}
.cartolina-image-portrait {
	width:60%!important;
	transform: translate(-50%, -60%)!important;
}
#cartolina-info-button {
	display: none;
}

	.description>*{
		width: 100%!important;
			padding: 20px;
	}

	button{
		white-space: nowrap;
	}


}



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

	body{
		transition:  0.4s;
	}


  	.hidden{
  		opacity: 0; /* Better for hiding elements completely */
  		pointer-events: none;
  	}

  	.cartolina-home{
  		
  		position: fixed;
  		transform: scale(1);
  		transition: 0.2s;
  		transition: 0.4s;
  	}

  	.landscape{width: 200px;}
  	.portrait{width: 150px;}

  	.cartolina-home:hover{
  		z-index: 300;
  		transform: scale(1.05);
  	}

  	.cartolina-home img{
  		width: 100%;
  	}

  	.filter{
  		position: fixed;
  		top: 0;
  		left: 0;
  		height: 100%;
  		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
  		pointer-events: none;
  	}

  	button{
  		background: none;
  		border: none;
  		font-size: 2em;
  		width: auto;
  		text-align: left;
  		cursor: pointer;
  		pointer-events: all;
  		transition: 0.4s;
  		padding: 20px;
  		color: black;

  	}

  	.back{

  		text-decoration: none;
  		font-family: sans-serif;
  		color: black;

  		  		background: none;
  		border: none;
  		font-size: 2em;
  		width: auto;
  		text-align: left;
  		cursor: pointer;
  		pointer-events: all;
  		transition: 0.4s;
  		margin: 20px;
  		position: fixed;
  		top:0;
  		left:0;

  		z-index: 400;
  	}

  	#info-button{
  		position: fixed;
  		top: 0;
  		right: 0;
  	}

  	.active span{
  		opacity: 0;
  	}

  	.active:before{
  		content:"L'Altra Montagna";
  	}

  	.title{
  		pointer-events: none;
  		position: fixed;
  		top:50%;
  		left:50%;
  		transform: translate(-50%, -50%);
  		font-size: 10vw;
  		white-space: nowrap;
  	}


	#cartolina-info-button{
		position: fixed;
bottom: 0;
right: 0;
z-index: 200;
	}

	.description{
		background-color: white;
		position: fixed;
		bottom:0;
		left:0;
		height:50vh;
		transform: translate(0, 100%);
		transition: 0.35s ease-in-out;
	}

	.description.visible{
		transform: translate(0, 0%);
	}

	.description>*{
		width: 50%;
		padding: 2em;
	}

	 h1{
		
		font-weight: normal;
		font-size: 1.5em;
		margin-bottom:1em;
	}

	.cartolina-image-landscape{
		width: 50vw;
		position: relative;
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
	}

		.cartolina-image-portrait{
		width: 30vw;
		position: relative;
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
	}



	.cartolina-image-landscape img, .cartolina-image-portrait img{
		width: 100%;
	}

	.audio-player {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Arial, sans-serif;
}

#play-pause {
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 5px;
  border-radius: 3px;

}

button.play {
  background-color: black;
}

button.pause {
  background-color: #f44336!important;
}

#info-wrap{

	width: 100vw;

	background-color: white;
	position: fixed;
	left:0;
	top:0;
	z-index: 200;
	padding: 30px;

	display: flex;
	gap: 60px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

	transform: translate(0, -100%);
	transition: 0.5s;
}

.open{
	transform: translate(0, 0%)!important;
}

#info-wrap>*:first-child{
	flex: 1;
	max-width: 700px;
}

#info-wrap>*:last-child{
	flex: 0;
}

.info-text{
	  line-height: 1.3em;
	  width: 50%;
}

.info-loghi{
	display: flex;
	gap: 60px;
}

.info-loghi div img{

	width: 130px;
	display: block;
	margin-bottom: 1em;
}

.info-loghi>*{

}

p{
	margin-bottom: 1em;
	line-height: 1.4em;
}

#close{
	width: 30px;
height: 30px;
position: fixed;
right: 0;
top: 0;
margin: 30px;
}