@media only screen and (min-width: 960px) {
	
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html, body {
		font-family: 'Noto Serif', serif;
		text-align: justify;
	}
	
	body {
		background: url('https://i.imgur.com/rDn04VC.jpg'), no-repeat fixed center;
		background-size: cover;
	}
	
	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	header {
		display: block;
		width: 100%;
		height: 50vh;
		margin: 0;
		padding: 0;
	}
	
	.container-wrapper {
		display: flex;
		justify-content: space-around;
		margin-top: auto;
		margin-right: 0em;
		margin-bottom: 0em;
		margin-left: 0em;
		background-color: rgba(0, 0, 0, 0);
		background-size: cover;
		transition: 0.6s;
	}
	
	.navigation {
		flex: 0;
	}
	
	.navigation-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0.5em;
		position: sticky;
		-webkit-position: sticky;
		/* permettono la direzione dello sticky */
		top:0;
		bottom:0;
	}
	
	.navigation-menu li {
		flex: 1;
		padding: 0.5em;
	}
	
	.navigation-menu li a {
		text-decoration: none;
		color: #fff;
	}
	
	span.fas {
		background-color: #b58d8d;
		padding: 1em;
		border-radius: 50%;
		cursor: pointer;
	}
	
	span.fas.fa-user, span.fas.fa-book, span.fas.fa-ellipsis-h {
		color: #4a2c2e;
		font-size: 25px;
	}
	
	span.link-text {
		font-family: 'Poppins', sans-serif;
		color: #fff;
		text-transform: uppercase;
		font-weight: 300;
		white-space: nowrap;
		display: block;
	}
	
	.content {
		flex: 2;
	}
	
	.pagecontent {
		margin: 2.5em 0.5em 0.8em 0.5em;
		padding: 0.2em;
	}
	
	.pagecontent h1, .pagecontent h2, .pagecontent h3, .pagecontent h4,
	.pagecontent h5, .pagecontent h6 {
		font-family: 'Playfair Display', serif;
		text-align: left;
		margin: 0.5em;
		color: #4a2c2e;
		font-weight: bold;
		font-style: italic;
		padding: 0.1em;
	}
	
	.pagecontent h1 {
		font-size: 2em;
	}
	
	.pagecontent h2 {
		font-size: 1.5em;
	}
	
	.pagecontent h3 {
		font-size: 1.17em;
	}
	
	.pagecontent h4 {
		font-size: 1em;
	}
	
	.pagecontent h5 {
		font-size: 0.83em;
	}
	
	.pagecontent h6 {
		font-size: 0.67em;
	}
	
	.pagecontent p {
		margin: 0.5em 1em 0.5em 1em;
		padding: 0.5em;
		font-size: 1.2em;
		line-height: 1.3em;
	}
	
	.pagecontent ul {
		font-size: 1.2em;
		padding: 0.8em;
	}
	
	.pagecontent a, .pagecontent a:active, .pagecontent a:visited {
		color: #4a2c2e;
		text-decoration: none;
		font-weight: bold;
	}
	
	.pagecontent a:hover {
		color: #9e595e;
		text-decoration: none;
		font-weight: bold;
		border-bottom: #4a2c2e 1px solid;
	}
	
	img.thumbnail {
		width: 50%;
		height: 50%;
		display: flex;
		justify-content: center;
		border-radius: 6px;
		display: block;
		margin: 0.5em;
		padding: 0.8em;
	}
	
	.bg-modal {
		width: 100%;
		height: 100%;
		background: rgba(176,163,163,0.7);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		position: absolute;
		top: 0;
		transition: ease-out 0.6s;
	}
	
	.modal-content {
		width: 100%;
		height: 150px;
		background-color: #fff;
		border-radius: 16px;
		text-align: center;
		margin: 0.1em 2em 2.5em 2em;
		padding: 0.2em;
		font-family: 'Poppins', sans-serif;
		font-size: 18px;
		color: #302e2e;
		line-height: normal;
	}	
	
	.close-modal {
		text-align: right;
		display: block;
		margin: 0.1em 0.5em 0.1em 0.5em;
		padding: 0em;
	}
	
	.close-modal span.fas {
		border-radius: none;
		background: transparent;
	}
	
	span.fas.fa-times {
		color: #4a2c2e;
		font-size: 20px;
		cursor: pointer;
	}
	
	#juu-content, #sitefolio-content, #misc {
		display: none;
		transition: 0.6s;
	}

}

@media only screen and (max-width: 959px) {
	
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html, body {
		font-family: 'Noto Serif', serif;
		text-align: left;
	}
	
	body {
		background: url('https://i.imgur.com/rDn04VC.jpg'), no-repeat fixed center;
		background-size: cover;
	}
	
	ul, li {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	header {
		display: none;
	}
	
	.container-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 0em;
		margin-right: 0em;
		margin-bottom: 0em;
		margin-left: 0em;
		padding: 0em;
		background-color: rgba(0, 0, 0, 0);
		background-size: cover;
		transition: 0.6s;
	}
	
	.navigation {
		width: 100%;
		height: 15vh;
		margin: 0em;
		padding: 0em;
		flex: 0;
		align-self: center;
		position: sticky;
		top: 0;
		z-index: 9999;
		background: rgba(74,44,46,0.7);
	}
	
	.navigation-menu {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 0em;
	}
	
	.navigation-menu li {
		flex: 1;
		padding: 0.5em;
	}
	
	.navigation-menu li a {
		text-decoration: none;
		color: #fff;
	}
	
	span.fas {
		background-color: #b58d8d;
		padding: 1em;
		border-radius: 50%;
		cursor: pointer;
	}
	
	span.fas.fa-user, span.fas.fa-book, span.fas.fa-ellipsis-h {
		color: #4a2c2e;
		font-size: 25px;
	}
	
	.content {
		flex: 1;
	}
	
	.pagecontent {
		margin: 2em;
		padding: 1em;
	}
	
	.pagecontent h1, .pagecontent h2, .pagecontent h3, .pagecontent h4,
	.pagecontent h5, .pagecontent h6 {
		font-family: 'Playfair Display', serif;
		text-align: center;
		margin: 0.5em;
		color: #4a2c2e;
		font-weight: bold;
		font-style: italic;
		padding: 0.1em;
	}
	
	.pagecontent h1 {
		font-size: 2em;
	}
	
	.pagecontent h2 {
		font-size: 1.5em;
	}
	
	.pagecontent h3 {
		font-size: 1.17em;
	}
	
	.pagecontent h4 {
		font-size: 1em;
	}
	
	.pagecontent h5 {
		font-size: 0.83em;
	}
	
	.pagecontent h6 {
		font-size: 0.67em;
	}
	
	.pagecontent p {
		margin: 0.5em 1em 0.5em 1em;
		padding: 0.5em;
		font-size: 1.2em;
		line-height: 1.3em;
	}
	
	.pagecontent ul {
		font-size: 1.2em;
		padding: 0.8em;
	}
	
	img.thumbnail {
		width: 60vw;
		height: 100%;
		border-radius: 6px;
		display: block;
		margin: 0 auto;
		padding: 0.8em;
	}
	
	.pagecontent a, .pagecontent a:active, .pagecontent a:visited {
		color: #4a2c2e;
		text-decoration: none;
		font-weight: bold;
	}
	
	.pagecontent a:hover {
		color: #9e595e;
		text-decoration: none;
		font-weight: bold;
		border-bottom: #4a2c2e 1px solid;
	}
	
	.bg-modal {
		max-width: 100%;
		height: 100%;
		background: rgba(176,163,163,0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		transition: ease-out 0.6s;
	}
	
	.modal-content {
		width: 80%;
		height: 35%;
		background-color: #fff;
		border-radius: 16px;
		text-align: center;
		margin: 0.1em 2em 2.5em 2em;
		padding: 0.2em;
		font-family: 'Poppins', sans-serif;
		font-size: 1em;
		color: #302e2e;
		line-height: normal;
	}	
	
	.close-modal {
		text-align: right;
		display: block;
		margin: 0.1em 0.5em 0.1em 0.5em;
		padding: 0em;
	}
	
	.close-modal span.fas {
		border-radius: none;
		background: transparent;
	}
	
	span.fas.fa-times {
		color: #4a2c2e;
		font-size: 20px;
		cursor: pointer;
	}
	
	#juu-content, #sitefolio-content, #misc {
		display: none;
		transition: 0.6s;
	}
}