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

a {
	text-decoration: none;
}

div.page, div#page6 {
	position: relative;
	width: 100vw;
	min-height: 100vh;
}

div.page {
	display: flex;
	flex-direction: row;
}

div.page div.container {
	position: relative;
	width: 50%;
	min-height: 600px;
	height: auto;
}

div.page div.container div.illustration {
	width: 90%;
	height: 100%;
	margin-left: 10%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

div.page div.container div.AlignText {
	position: relative;
	width: 80%;
	margin: auto;
	margin-top: 25%;
	height: 50%;
	text-align: left;
}

/*Per google SEO */
div.page div.container div.AlignText h1 {
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 66px;
	color: var(--rosa);
	padding-bottom: 10%;
}
/* ------------- */

div.page div.container div.AlignText h2 {
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 66px;
	color: var(--rosa);
	padding-bottom: 7.5%;
}

div.page div.container div.AlignText p {
	font-family: 'GMedium';
	font-size: 23px;
	line-height: 31px;
	color: var(--viola);
	padding-bottom: 1%;
}

div.page div.container div.AlignText p b {
	font-family: 'GBlack';
}

/* IDs rules */
div#page1 div.container {
	top: 10%;
}

div#page1 div#title {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	background-image: url("../img/storia/storia.png");
	height: 58px;
	width: 446px;
	position: absolute;
	left: 55%;
	margin-top: 250px;
}

div#page1 div.container div.AlignText h1 {
	margin-top: 400px;
}

div#page1 div.container div.illustration {
	background-image: url("../img/storia/nascita.png");
	background-position: center 80%;
}

div#page2, div#page4 {
	flex-direction: row-reverse;
}

div#page2 div.container div.AlignText, div#page4 div div.AlignText {
	text-align: right;
}

div#page2 div.container div.illustration {
	background-image: url("../img/storia/star.png");
	margin-right: 10%;
	margin-left: 0;
}

div#page3 div.container div.illustration {
	background-image: url("../img/storia/farfalle.png");
}

div#page4 div.container div.illustration {
	background-image: url("../img/storia/leucemia.png");
	margin-right: 10%;
	margin-left: 0;
}

div#page5 div.container div.illustration {
	background-image: url("../img/storia/costruire.png");
}

div#page6 div.container {
	position: relative;
	width: 80%;
	left: 10%;
	height: auto;
	min-height: 600px;
	padding-top: 10%;
	padding-bottom: 10%;
}

div#page6 div.container div.illustration {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	background-image: url("../img/storia/want.png");
	position: relative;
	width: 100%;
	height: auto;
	min-height: 600px;
	left: 0;
}

div#page6 div.container div.AlignText {
	position: relative;
	text-align: center;
}

div#page6 div.container div.AlignText h3 {
	font-family: 'GBold';
	font-size: 55px;
	line-height: 66px;
	color: var(--viola);
}

div#page6 div.container div.AlignText h3 label {
	color: var(--rosa);
}

@media (max-width: 1024px){
	div.page {
		flex-direction: column;
		padding-bottom: 10%;
	}

	div.page div.container {
		position: relative;
		width: 100%;
	}

	div.page div.container div.illustration {
		width: 90%;
		min-height: 600px;
		margin-left: 0;
		margin: auto;
	}

	div.page div.container div.AlignText {
		margin-top: 12.5%;
	}

	/* Ids rules */
	div#page1 div#title {
		position: relative;
		left: 50%;
		margin-left: -223px;
	}

	div#page1 div.container div.illustration {
		margin-top: 15%;
	}

	div#page1 div.container div.AlignText h1 {
		margin-top: 0;
	}

	div#page2, div#page4 {
		flex-direction: column;
	}

	div#page2 div.container div.illustration, div#page4 div.container div.illustration {
		margin-right: 0;
	}
}

@media (max-width: 700px) {
	div.page div.container div.AlignText h1,
	div.page div.container div.AlignText h2,
	div.page div.container div.AlignText p {
		text-align: center;
	}

	div#page2 div.container div.illustration,
	div#page4 div.container div.illustration {
		margin-right: 0;
		margin: auto;
	}
}

/* Per iPhone portrait*/
@media only screen
	and (max-device-width: 980px)
	and (min-device-height:  480px)
	and (orientation:portrait) {
		div.page div.container div.AlignText h1,
		div.page div.container div.AlignText h2 {
			font-size: 45px;
			line-height: 50px;
		}

		div#page6 div.container div.AlignText h3 {
			font-size: 40px;
			line-height: 45px;
		}

		div.page div.container div.AlignText p {
			font-size: 20px;
			line-height: 25px;
		}

		div#page1{
			top: 0;
			margin-top: 0;
		}

		div#page1 div#title {
			height: 58px;
			width: 200px;
			left: 0;
			margin-left: 0;
			margin: auto;
			margin-top: 100px;
		}

		div#page1 div.container {
			top: 0;
			margin-top: 0;
		}

		div.page#page1 div.container div.AlignText {
			margin-top: 0;
			top: 0;
			text-align: center;
		}

		div#page1 div.container div.illustration {
			margin-top: 0;
			background-position: center;
			height: 50%;
		}
}