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

div.page {
	position: relative;
	min-height: 100vh;
	height: auto;
	width: 100%;
}

/* ----- Page 1 ----- */
div.page#page1 {
	background-image: url("../img/dona/cover.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

div.page#page1 div.elementContainer {
	position: relative;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

div.page#page1 div.elementContainer div.claimContainer {
	position: relative;
	height: 60vh;
	width: 50%;
	margin: auto;
	left: 10%;
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: center;
}

div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer {
	position: relative;
	min-height: 20vh;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: end;
}

div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer p {
	font-family: 'GMedium';
	font-size: 43px;
	line-height: 49px;
	color: var(--viola);
	text-align: right;
	padding-bottom: 50px;
}

div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer a {
	text-decoration: none;
}

div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer a div.anchor {
	position: relative;
	width: 260px;
	height: 73px;
	background-color: var(--rosa);
	color: white;
	border-radius: 10px;
	font-family: 'GBold';
	font-size: 27px;
	line-height: 73px;
	text-align: center;
}

div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer a div.anchor:hover {
	background-color: var(--viola);
}

div.page#page1 div.elementContainer div.buttonContainer {
	position: relative;
	height: 40vh;
	width: 80%;
	margin: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer {
	position: relative;
	width: 50%;
	min-height: 50%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.button {
	position: relative;
	width: 150px;
	height: 150px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer:nth-child(1) div.button {
	background-image: url("../img/dona/manoButton.png");
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer:nth-child(2) div.button {
	background-image: url("../img/dona/5Button.png");
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer {
	position: relative;
	margin-left: 50px;
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer  h2 {
	font-family: 'GBlack';
	font-size: 52px;
	line-height: 49px;
	color: var(--rosa);
	padding-bottom: 25px;
}

div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer  p {
	font-family: 'GBook';
	font-size: 33px;
	line-height: 38px;
	color: var(--viola);
}

div.padder {
	display: none;
}

/* ----- Page 2 ----- */
div.page#page2 div.decoroMainContainer {
	width: 100%;
	height: 100vh;
	position: absolute;
	display: flex;
	flex-direction: row;
}

div.page#page2 div.decoroMainContainer div.decoroContainer {
	height: 100vh;
	width: 50%;
	background-repeat: no-repeat;
	background-size: 50%;
}

div.page#page2 div.decoroMainContainer div.decoroContainer:nth-child(1) {
	background-position: bottom left;
	background-image: url("../img/dona/decoroSx.png");
}

div.page#page2 div.decoroMainContainer div.decoroContainer:nth-child(2) {
	background-position: bottom right;
	background-image: url("../img/dona/decoroDx.png");
}

div.page#page2 div.mainTxtContainer {
	position: relative;
	min-height: 100vh;
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

div.page#page2 div.mainTxtContainer h2 {
	font-family: 'GBlack';
	color: var(--rosa);
	font-size: 52px;
	line-height: 55px;
}

div.page#page2 div.mainTxtContainer p {
	font-family: 'GMedium';
	font-size: 23px;
	line-height: 31px;
	color: var(--viola);
	width: 50%;
	padding-top: 50px;
	text-align: center;
}

div.page#page2 div.mainTxtContainer p b {
	font-family: 'GBlack';
}

/* ----- Page 3 ----- */
div.page#page3 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: var(--header);
}

div.page#page3 div.container {
	position: relative;
	width: 50%;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 5%;
	padding-bottom: 5%;
}

div.page#page3 div.container:nth-child(1) {
	background-image: url("../img/dona/5xMille.png");
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center;
}

div.page#page3 div.container div.titleContainer {
	position: relative;
	width: 80%;
}

div.page#page3 div.container div.titleContainer h2 {
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 60px;
	color: var(--rosa);
}

div.page#page3 div.container div.descContainer {
	width: 80%;
	text-align: left;
	padding-top: 50px;
}

div.page#page3 div.container div.descContainer h3 {
	font-family: 'GBlack';
	font-size: 23px;
	line-height: 31px;
	color: var(--rosa);
}

div.page#page3 div.container div.descContainer p {
	font-family: 'GMedium';
	font-size: 23px;
	line-height: 31px;
	color: var(--viola);
	padding-bottom: 25px;
}

div.page#page3 div.container div.descContainer p b {
	font-family: 'GBlack';
}

div.page#page3 div.container div.descContainer p i {
	font-family: 'GBookIta';
}

/* ----- Page 4 ----- */
div.page#page4 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 100px;
	padding-bottom: 5%;
}

div.page#page4 div.titleContainer {
	position: relative;
	width: 90%;
	text-align: center;
	padding-bottom: 100px;
}

div.page#page4 div.titleContainer h2 {
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 60px;
	color: var(--rosa);
	padding-bottom: 50px;
}

div.page#page4 div.titleContainer p {
	font-family: 'GBook';
	font-size: 40px;
	line-height: 48px;
	color: var(--viola);
}

div.page#page4 div.technicalErrorContainer {
	position: relative;
	width: 90%;
	margin: auto;
}

div.page#page4 div.technicalErrorContainer p {
	max-width: 1200px;
	margin: auto;
	font-family: 'GLightIta';
	font-size: 21px;
	line-height: 30px;
	color: var(--viola);
	text-align: center;
}

div.page#page4 div.assegno {
	position: relative;
	width: 90%;
	max-width: 1024px;
	min-height: 400px;
	height: auto;
	border: 2px solid var(--rosa);
	background-image: url("../img/dona/assegno.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	margin-bottom: 25px;
}

div.page#page4 div.assegno div.row {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

div.page#page4 div.assegno div.row:nth-child(1) {
	justify-content: space-between;
	width: 70%;
	left: 7%;
}

div.page#page4 div.assegno div.row div.logo {
	position: relative;
	background-image: url("../img/dona/logo.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 200px;
	height: 75px;
}

div.page#page4 div.assegno div.row:nth-child(2) {
	flex-direction: column;
	width: 90%;
}

div.page#page4 div.assegno div.row div.dataContainer {
	position: relative;
	min-width: 200px;
	width: auto;
	height: 75px;
	font-family: 'GLightIta';
	font-size: 21px;
	line-height: 75px;
	color: var(--rosa);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

div.page#page4 div.assegno div.row div.dataContainer div.data {
	font-family: 'GLight';
	color: var(--footer);
	padding-left: 25px;
}

div.page#page4 div.assegno div.row div.subRow {
	position: relative;
	width: 90%;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

div.page#page4 div.assegno div.row div.subRow div.desc {
	position: relative;
	width: 20%;
	font-family: 'GBookIta';
	font-size: 18px;
	line-height: 50px;
	color: var(--viola);
}

div.page#page4 div.assegno div.row div.subRow input {
	position: relative;
	width: 80%;
	height: 50px;
	border: none;
	background-color: transparent;
	border-bottom: 2px solid var(--viola);
	color: var(--rosa);
	font-family: 'GBook';
	font-size: 18px;
	line-height: 50px;
	border-radius: 0px;
	text-align: center;
	text-overflow: ellipsis;
	font-family: sans-serif;
}

div.page#page4 div.buttonAndPaypalContainer {
	position: relative;
	width: 90%;
	margin-top: 50px;
	padding-bottom: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: none;
}

div.page#page4 div.buttonAndPaypalContainer button#pagamento {
	position: relative;
	width: 250px;
	height: 75px;
	background-color: var(--rosa);
	color: white;
	border-radius: 20px;
	font-family: 'GBold';
	font-size: 27px;
	line-height: 73px;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	border: none;
}

div.page#page4 div.buttonAndPaypalContainer button#pagamento:hover {
	background-color: var(--viola);
}

div.page#page4 div.buttonAndPaypalContainer div.bottoniPaypal {
	width: 100%;
	max-width: 600px;
	z-index:1;
}

/* ----- Page 5 ----- */
div.page#page5 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: var(--header);
}

div.page#page5 div.titleContainer {
	position: relative;
	text-align: center;
	width: 90%;
	padding-bottom: 100px;
}

div.page#page5 div.titleContainer h2 {
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 60px;
	color: var(--rosa);
}

div.page#page5 div.cardContainer {
	position: relative;
	width: 90%;
}

div.page#page5 div.cardContainer div.mainCard,
div.page#page5 div.cardContainer div.card {
	background-color: white;
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: auto;
	border-radius: 15px;
	height: auto;
	padding: 5%;
}

div.page#page5 div.cardContainer div.mainCard div.circleContainer,
div.page#page5 div.cardContainer div.card div.circleContainer {
	position: relative;
	width: 300px;
	height: 300px;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.page#page5 div.cardContainer div.mainCard div.circleContainer div.outer,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer2,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer3 {
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.page#page5 div.cardContainer div.mainCard div.circleContainer div.outer div.inner,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer2 div.inner,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer3 div.inner {
	position: relative;
	height: 90%;
	width: 90%;
	background-color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.page#page5 div.cardContainer div.mainCard div.circleContainer div.outer div.inner div.valueContainer,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer2 div.inner div.valueContainer2,
div.page#page5 div.cardContainer div.card div.circleContainer div.outer3 div.inner div.valueContainer3 {
	font-family: 'GMedium';
	font-size: 50px;
	color: var(--rosa);

}

div.page#page5 div.cardContainer div.card {
	display: flex;
	flex-direction: row;
	margin-top: 50px;
	background-color: unset;
}

div.page#page5 div.cardContainer div.mainCard div.descContainer {
	text-align: center;
}

div.page#page5 div.cardContainer div.mainCard div.descContainer,
div.page#page5 div.cardContainer div.card div.descContainer {
	padding-top: 50px;
}

div.page#page5 div.cardContainer div.mainCard div.descContainer h3,
div.page#page5 div.cardContainer div.card div.descContainer h3 {
	font-family: 'GBlack';
	font-size: 23px;
	line-height: 28px;
	color: var(--rosa);
	padding-bottom: 25px;
}

div.page#page5 div.cardContainer div.card div.descContainer h3 {
	margin-left: 10%;
}

div.page#page5 div.cardContainer div.mainCard div.descContainer p,
div.page#page5 div.cardContainer div.card div.descContainer p {
	font-family: 'GMedium';
	font-size: 23px;
	line-height: 28px;
	color: var(--viola);
	width: 80%;
	margin: auto;
}

@media (max-width: 1200px) {
	/* ----- Page 1 ----- */
	div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer p {
		font-size: 38px;
		line-height: 43px;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.button {
		width: 250px;
		height: 250px;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer h2 {
		font-size: 45px;
		line-height: 50px;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer p {
		font-size: 28px;
		line-height: 33px;
	}

	/* ----- Page 3 ----- */
	div.page#page3 div.container:nth-child(1) {
		background-size: 70%;
	}
}

@media (max-width: 900px) {
	/* ----- Page 1 ----- */
	div.page#page1 {
		min-height: 200vh;
		background-image: url("../img/dona/coverMob.png");
		background-size: cover;
		background-position: bottom 90% center;
		padding-top: 60vh;
	}

	div.page#page1 div.elementContainer {
		flex-direction: column-reverse;
	}

	div.page#page1 div.elementContainer div.buttonContainer {
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer {
		min-height: 50vh;
		width: 90%;
		flex-direction: column;
		margin: auto;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer:nth-child(2) {
		padding-top: 50px;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.button {
		width: 200px;
		height: 200px;
	}

	div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer {
		text-align: center;
		margin-left: 0;
	}

	div.page#page1 div.elementContainer div.claimContainer {
		width: 90%;
		margin: auto;
		left: 0;
		padding-top: 50px;
		align-items: center;
	}

	div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer {
		align-items: center;
	}

	div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer p {
		text-align: center;
	}

	/* ----- Page 2 ----- */
	div.page#page2 div.decoroMainContainer div.decoroContainer:nth-child(1) {
		width: 100%;
		background-size: 80%;
		background-position: left 120%;
	}

	div.page#page2 div.decoroMainContainer div.decoroContainer:nth-child(2) {
		display: none;
	}

	div.page#page2 div.mainTxtContainer p {
		width: 80%;
	}

	/* ----- Page 3 ----- */
	div.page#page3 div.container:nth-child(1) {
		display: none;
	}

	div.page#page3 div.container:nth-child(2) {
		width: 100%;
		padding-top: 100px;
		padding-bottom: 100px;
	}

	div.page#page3 div.container div.descContainer {
		text-align: center;
	}

	div.page#page3 div.container div.titleContainer {
		width: 100%;
		text-align: center;
	}

	/* ----- Page 4 ----- */
	div.page#page4 div.assegno {
		border: none;
		background-image: none;
	}

	div.page#page4 div.assegno div.row:nth-child(1) {
		display: none;
	}

	div.page#page4 div.assegno div.row div.subRow {
		flex-direction: column;
		height: 150px;
		height: auto;
		padding-top: 25px;
	}

	div.page#page4 div.assegno div.row div.subRow div.desc {
		width: 100%;
		text-align: center;
		line-height: 50px;
		height: 50px;
	}

	div.page#page4 div.assegno div.row div.subRow input {
		height: 75px;
	}

	/* ----- Page5 ----- */
	div.page#page5 div.cardContainer div.mainCard {
		background-color: unset;
	}

	div.page#page5 div.cardContainer div.card {
		flex-direction: column;
		margin-top: 75px;
	}

	div.page#page5 div.cardContainer div.card div.descContainer {
		text-align: center;
	}

	div.page#page5 div.cardContainer div.card div.descContainer h3 {
		margin-left: 0;
	}
}

@media (max-width: 700px) {
	/* ----- Page 2 ----- */
	div.page#page2 div.decoroMainContainer div.decoroContainer:nth-child(1) {
		background-position: left bottom;
	}
}

/* Per iPhone portrait*/
@media only screen
	and (max-device-width: 800px)
	and (min-device-height:  480px)
	and (orientation:portrait) {
		/* ----- Page 1 ----- */
		div.page#page1 {
			background-image: url("../img/dona/coverMob.png");
			background-size: cover;
			background-position: center;
			min-height: 200vh;
			padding-top: 50vh;
		}

		div.page#page1 div.elementContainer {
			flex-direction: column-reverse;
		}

		div.padder {
			display: block;
			background-color: var(--header);
			position: absolute;
			top: 100vh;
			height: 100vh;
			width: 100%;
			z-index: -1;
		}

		div.page#page1 div.elementContainer div.buttonContainer {
			flex-direction: column;
			min-height: 100vh;
			width: 100%;
		}

		div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer {
			min-height: 50vh;
			width: 90%;
			flex-direction: column;
			margin: auto;
		}

		div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer:nth-child(2) {
			padding-top: 50px;
		}

		div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.button {
			width: 200px;
			height: 200px;
		}

		div.page#page1 div.elementContainer div.buttonContainer div.buttonDescContainer div.textContainer {
			text-align: center;
			margin-left: 0;
		}

		div.page#page1 div.elementContainer div.claimContainer {
			width: 90%;
			margin: auto;
			left: 0;
			padding-top: 50px;
			align-items: center;
		}

		div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer {
			align-items: center;
		}

		div.page#page1 div.elementContainer div.claimContainer div.buttonDescContainer p {
			text-align: center;
		}

		/* ----- Page 4 ----- */
		div.page#page4 div.titleContainer h2 {
			font-family: 'GBlack';
			font-size: 45px;
			line-height: 50px;
			color: var(--rosa);
			padding-bottom: 50px;
		}

		div.page#page4 div.titleContainer p {
			font-family: 'GBook';
			font-size: 30px;
			line-height: 38px;
			color: var(--viola);
		}

		div.page#page4 div.assegno div.row div.subRow input {
			width: 100%;
		}

		div.page#page4 div.assegno div.row div.subRow:nth-child(3) {
			display: none;
		}

		/* ----- Page 5 ----- */
		div.page#page5 div.cardContainer div.mainCard div.circleContainer div.outer,
		div.page#page5 div.cardContainer div.card div.circleContainer div.outer2,
		div.page#page5 div.cardContainer div.card div.circleContainer div.outer3 {
			width: 200px;
			height: 200px;
		}

		div.page#page5 div.cardContainer div.mainCard div.descContainer p,
		div.page#page5 div.cardContainer div.card div.descContainer p {
			width: 90%;
		}

	}

/* Per iPhone landscape*/
@media screen
	and (max-height:  580px)
	and (orientation:landscape) {
		/* ----- Page 1 ----- */
		div.page#page1 {
			min-height: 300vh;
			padding-top: 100vh;
		}

		/* ----- Page 2 ----- */
		div.page#page2 {
			height: 150vh;
			min-height: 150vh;
			max-height: 150vh;
			padding-bottom: 5%;
		}

		div.page#page2 div.decoroMainContainer {
			height: 150vh;
		}

		div.page#page2 div.decoroMainContainer div.decoroContainer {
			height: 150vh;
		}

		div.page#page2 div.mainTxtContainer {
			height: 150vh;
		}
	}