/* ----- Page 1 ----- */
/* cover */
main div.page#page1 div.coverContainer {

}

main div.page#page1 div.coverContainer div.cover {
	position: relative;
	width: 100%;
	height: 100vh;
	background-image: url("../../img/blog/sustainableCity/cover.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

main div.page#page1 div.coverContainer div.overlay {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	top: 40vh;
	height: 60vh;
	background-image: url("../../img/blog/sustainableCity/overlay.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;
	z-index: 1;
}

main div.page#page1 div.coverContainer div.overlay h1 {
	width: 90%;
	left: 5%;
	font-family: 'GBlack';
	font-size: 55px;
	line-height: 66px;
	text-align: center;
	color: var(--viola);
	position: absolute;
	bottom: 50px;
}

/* ----- Page 2 ----- */
main div.page#page2 {
	background-color: white;
}

/* ----- Page of gallery ----- */
main div.page#gallery {
	background-color: var(--grigioSfondo);
}

main div.page div.galleryContainer div.ContGalleryFlexR div.ContGallery1 {
	background-image: url("../../img/blog/sustainableCity/foto1.png");
}

main div.page div.galleryContainer div.ContGalleryFlexR div.ContGallery2 div.ContGallery3 div.altosx {
	background-image: url("../../img/blog/sustainableCity/foto2.png");
}

main div.page div.galleryContainer div.ContGalleryFlexR div.ContGallery2 div.ContGallery3 div.altodx {
	background-image: url("../../img/blog/sustainableCity/foto3.png");
}

main div.page div.galleryContainer div.ContGalleryFlexR div.ContGallery2 div.ContGallery3 div.bassosx {
	background-image: url("../../img/blog/sustainableCity/foto4.png");
}

main div.page div.galleryContainer div.ContGalleryFlexR div.ContGallery2 div.ContGallery3 div.bassodx {
	background-image: url("../../img/blog/sustainableCity/foto5.png");
}



/* queeries */
@media (max-height: 800px) {
	/* ----- Page 1 ----- */
	/* cover */
	main div.page#page1 div.coverContainer div.overlay {
		height: 100vh;
		top: 0;
	}

	main div.page#page1 div.coverContainer div.overlay h1 {
		margin-bottom: 50px;
	}	
}

@media (max-height: 800px)  and (max-width: 1200px){
	/* ----- Page 1 ----- */
	/* cover */
	main div.page#page1 div.coverContainer div.overlay {
		height: 100vh;
		top: 0;
	}

	main div.page#page1 div.coverContainer div.overlay h1 {
		margin-bottom: 50px;
	}
}

@media (max-width: 1100px) and (max-height: 1100px) {
	/* ----- Page 1 ----- */
	/* cover */
	main div.page#page1 div.coverContainer div.overlay h1 {
		bottom: 0px;
	}
}

@media (orientation: landscape) and (max-height: 600px ) {
	/* ----- Page 1 ----- */
	main div.page#page1 {
		height: 150vh;
		height: auto;
	}

	/* cover */
	main div.page#page1 div.coverContainer {
		height: 150vh;
	}

	main div.page#page1 div.coverContainer div.cover {
		height: 150vh;
		background-position: top;
	}

	main div.page#page1 div.coverContainer div.overlay {
		height: 100vh;
		top: 50vh;
	}

	main div.page#page1 div.coverContainer div.overlay h1 {
		font-size: 50px;
		line-height: 55px;
		bottom: 0;
		margin-bottom: 25px;
	}
}

@media (max-device-width: 600px) and (orientation: portrait) {
	main div.page#page1 div.coverContainer div.overlay h1 {
		font-size: 45px;
		line-height: 50px;
		bottom: 0;
		margin-bottom: 75px;
	}

	/* ----- Page 2 ----- */
	main div.page#page2 {
		background-color: var(--grigioSfondo);
		min-height: 50vh;
	}

	/* ----- Page for gallery ----- */
	main div.page#gallery {
		background-color: white;
	}
}