.page-diagrama #menu{
	width:100%;
}
.page-diagrama .bg-map{
	width:100%;
}
#diagram{
	width:100vw;
	height:calc(100% - 80px);
	margin-top:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.diagram-card{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	height:600px;
	background:#000;
	border:10px solid #fff;
	color:#fff;
	position:relative;
	overflow:hidden;
	padding-bottom:100px;
}
#diagram-page-8{
	padding-bottom:0px !important;
}

.diagram-card p{
	font-size:13px;
	text-align:justify;
}
.diagram-navigation{
	position:absolute;
	width:100%;
	bottom:0px;
	display:flex;
	justify-content:space-between;
	padding:0px 20px 10px 20px;
}
.diagram-navigation img{
	height:40px;
}

#diagram-page-1{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#diagram-page-1 h1{
	margin:20px 0px 0px 0px;
	font-size:48px;
}
#diagram-page-1 h2{
	font-weight:300;
	font-size:32px;
	line-height:20px;
	padding-bottom:30px;
}
#diagram-page-1 .split{
	display:flex;
	gap:70px;
	margin:10px 70px 0px 70px;
}
#diagram-page-1 .split .left img{
	width:500px;
}
#diagram-page-1 .divider{
	width:350px;
	margin-top:10px;
}
#diagram-page-2{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#diagram-page-2 .split{
	display:flex;
	gap:30px;
	margin:10px 40px 0px 70px;
}
#diagram-page-2 .split .left{
	width:400px;
}
#diagram-page-2 .split .left p{
	padding:10px 0px;
	font-size:12.8px;
}
#diagram-page-2 .split .right{
	flex:1;
}
#diagram-page-2 .highlight-image{
	margin:20px 40px 20px 20px;
	z-index:1;
}
#diagram-page-2 .highlight-image.line {
	padding:10px 20px;
}
#diagram-page-2 .highlight-image.line p{
	font-size:10px !important;
	font-weight:700;
}
#diagram-page-2 .highlight-image.line img{
	width:50px;
	margin-right:10px;
}
#diagram-page-2 .highlight-image.line:before{
	padding:0px 50px;
	top:-10px;
	bottom:-10px;
	left:-10px;
}
#diagram-page-2 .full-width-image img{
	width:400px;
}
#diagram-page-2 .image-subtitle{
	margin:0px 80px 0px 0px;
}

#diagram-page-3{
	display:flex;
	flex-direction:column;
	padding:40px 0px;
}
#diagram-page-3 .stack{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#diagram-page-3 .stack .image-1{
	width:450px;
}
#diagram-page-3 .stack p{
	background:#1b1b1b;
	padding:30px 100px 20px 100px;
	margin-top:40px;
	margin-bottom:40px;
	font-size:11.3px;
}
#diagram-page-3 .stack .image-2{
	width:250px;
}




#diagram-page-4{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:40px 0px;
	background-image:url('../img/diagram/d2.avif');
	background-repeat:no-repeat;
	background-size: 100% auto;	
}

#diagram-page-4 .full-width-image img{
	width:400px;
}
#diagram-page-4 .split{
	display:flex;
	margin:0px 100px;
	gap:40px;
}
#diagram-page-4 .image-subtitle{
	margin:0px 0px 0px 40px;
	padding:10px 0px 0px 10px !important;
}
#diagram-page-4 .right{
	display:flex;
	align-items:center;
	padding-right:30px;
}


#diagram-page-5 .alone{
	padding:30px 100px 20px 100px;
}
#diagram-page-5 .author-name h1{
	font-size:40px !important;
}
#diagram-page-5 .author-name h2{
	font-weight:300;
	top:-12px;
}
#diagram-page-5 .author-bio p{
	line-height:22px;
	font-weight:500;
	font-size:15px !important;
	padding-bottom:25px !important;
}

#diagram-page-6{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:40px 0px;
}
#diagram-page-6 .paragraph-image{
	display:flex;
	margin:20px 0px;
}
#diagram-page-6 .paragraph-image .image{
	display:flex;
	align-items:center;
	justify-content:center;
}
#diagram-page-6 .paragraph-image .image img{
	width:100px;
}
#diagram-page-6 .paragraph-image .paragraph p{
	padding:10px 0;
}

#diagram-page-6 .image-highlight{
	display:flex;
	align-items:center;
	padding:0px 50px;
}
#diagram-page-6 .image-highlight img{
	width:450px;
}
#diagram-page-6 .highlight-no-left-border{
	border:3px solid #ffe533;
	border-left:none;
}
#diagram-page-6 .highlight-no-left-border p{
	padding:40px 50px;
	color:#ffe533;
	font-size:11.75px;
}


#diagram-page-7{
	display:flex;
	flex-direction:column;
	align-items:center;
}
#diagram-page-7 .composition-page-7{
	display:flex;
}
#diagram-page-7 .composition-page-7 .composition-left img{
	width:500px;
}
#diagram-page-7 .composition-page-7 .composition-right{
	display:flex;
	flex-direction:column;
}
#diagram-page-7 .composition-page-7 .composition-right p{
	padding:60px 40px 20px 40px;
}
#diagram-page-7 .composition-page-7 .composition-right img{
	width:100px;
	align-self:center;
}
#diagram-page-7 .subtitle-page-7{
	border-left:5px solid #fff;
	margin:0px 0px 0px 50px;
}
#diagram-page-7 .subtitle-page-7 p{
	padding:20px 50px 0px 10px;
	font-size:10px;
}

#diagram-page-8 .page-8-graphic{
	display:flex;
	gap:40px;
	height:100%;
}
#diagram-page-8 .page-8-graphic .left{
	background-image:url('../img/diagram/h1.avif');
	background-size:cover;
	background-repeat:no-repeat;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	width:450px;
}
#diagram-page-8 .page-8-graphic .right{
	flex:1;
	padding:20px 40px 20px 0px;
}
#diagram-page-8 .page-8-graphic .right p{
	padding:10px 0;
	font-size:12px;
}
#diagram-page-9{
	display:none;
}
#sphere-with-text{
	width:392px;
	height:392px;
	background:#000;
	border-radius:400px;
}
#sphere-with-text p{
	text-align:center;
	font-size:12px;
	height:100%;
}
#sphere-with-text::before {
	content: "";
	float: left;
	height: 100%;
	width: 50%;
	shape-outside: polygon(
	  0 0,
	  98% 0,
	  50% 6%,
	  23.4% 17.3%,
	  6% 32.6%,
	  0 50%,
	  6% 65.6%,
	  23.4% 82.7%,
	  50% 94%,
	  98% 100%,
	  0 100%
	);
	shape-margin: 2%;
}
#sphere-with-text p::before {
	content: "";
	float: right;
	height: 100%;
	width: 50%;
	shape-outside: polygon(
	  2% 0%,
	  100% 0%,
	  100% 100%,
	  2% 100%,
	  50% 94%,
	  76.6% 82.7%,
	  94% 65.6%,
	  100% 50%,
	  94% 32.6%,
	  76.6% 17.3%,
	  50% 6%
	  );
	shape-margin: 2%;
}


#diagram .ruler{
	position:fixed;
	bottom:0;
	zoom:0.7;
}

@media (max-height: 900px) {
	#diagram .ruler{
		display:none;	
	}
}

@media (min-width: 2500px){
	.diagram-card{
		zoom:1.5;
	}
}
@media (min-width: 3500px){
	.diagram-card{
		zoom:2;
	}
}
@media (max-width: 1919px){
	.diagram-card{
		zoom:0.9;
	}
}
@media (max-width: 1370px){
	.diagram-card{
		zoom:0.7;
	}
}

@media (pointer: coarse) and (max-width: 1367px){
	.diagram-card{
		zoom:0.7;
	}
}


@media (max-width: 720px){
	#diagram{
		align-items:flex-start;
		justify-content:flex-start;
		margin-top:55px;
		height:calc(100% - 55px);
	}
	.diagram-card{
		position:relative;
		height:auto;
		border-left:none;
		border:1px solid #fff;
		border-top:5px solid #fff;
		border-bottom:5px solid #fff;
		padding:0px 0px 70px 0px !important;
		zoom:1;
	}
	#diagram-page-1 .split .left img{
		width:100%;
		max-width:500px;
	}
	#diagram-page-1 h1 {
		font-size:1.3rem;
	}
	#diagram-page-1 h2 {
		font-size:1rem;
		text-align:center;
	}
	#diagram-page-2{
		padding-top:10px !important;
	}
	#diagram-page-2 .split .left p{
		padding:10px 20px 0px 30px;
	}
	#diagram-page-2 .highlight-image{
		margin:0px 20px 10px 20px;
	}
	#diagram-page-2 .highlight-image p{
		padding:0px;
	}
	#diagram-page-2 .highlight-image:before{
		display:none;
	}
	#diagram-page-2 .full-width-image{
		display:none;
	}
	#diagram-page-3{
		padding-top:30px !important;
	}
	#diagram-page-3 .image-1{
		width:90vw !important;
	}
	#diagram-page-3 .stack p{
		padding:30px 20px;
	}
	#diagram-page-4{
		background-size:auto 100%;
		padding-top:20px !important;
	}
	#diagram-page-4 .full-width-image{
		display:flex;
		flex-direction:column;
		align-items:center;
		padding:0px;
	}
	#diagram-page-4 .full-width-image img{
		width:70vw;
	}
	#diagram-page-4 .right{
		padding:0px;
	}
	#diagram-page-4 p{
		line-height:15px;
	}
	#diagram-page-5 .alone{
		padding:10px 20px;
		font-size:12px;
	}
	#diagram-page-5 .author-name{
		padding-left:70px;
		padding-bottom:0px;
		flex-direction:column;
		justify-content:flex-start;
		align-items:flex-start;
		gap:10px;
	}
	#diagram-page-5 .author-name h1{
		font-size:16px !important;
	}
	#diagram-page-5 .author-bio p{
		padding:10px 20px !important;
		font-size:12px !important;
		line-height:14px !important;
	}
	#diagram-page-5 .author-image{
		position:absolute;
		top:15px;
		left:20px;
		min-width:auto;
	}
	#diagram-page-5 .author-name h2{
		padding:0px 0px 0px 10px !important;
	}
	#diagram-page-5 .author-image img{
		width:50px;
		height:50px;
	}
	#diagram-page-6{
		justify-content:flex-start;
		padding-top:20px !important;
	}
	#diagram-page-6 .paragraph-image{
		flex-direction:column;
		margin:0px 0px;
		padding:0px 0px;
		gap:0px;
	}
	#diagram-page-6 .paragraph-image .image{
		display:none;
	}
	#diagram-page-6 p{
		font-size:12px;
		padding:0px 20px 10px 20px !important;
	}
	#diagram-page-6 .image-highlight{
		flex-direction:column;
	}
	#diagram-page-6 .image-highlight img{
		width:80vw;
	}
	#diagram-page-6 .highlight-no-left-border{
		border-left: 3px solid #ffe533;
		margin-top:10px;
	}
	#diagram-page-6 .highlight-no-left-border p{
		font-size:11px;
		line-height:13px;
		padding-top:10px !important;
	}
	#diagram-page-7 .composition-page-7{
		flex-direction:column;
	}
	#diagram-page-7 .composition-page-7 .composition-left img{
		width:100%;
		margin-top:10px;
	}
	#diagram-page-7 .composition-page-7 .composition-right p{
		padding:10px 20px;
		font-size:11px;
	}
	#diagram-page-7 .composition-page-7 .composition-right img{
		display:none;
	}
	#diagram-page-7 .subtitle-page-7{
		display:none;
	}
	#diagram-page-8{
		gap:0;
		padding:0px 0px 0px 0px !important;
	}
	#diagram-page-8 .page-8-graphic{
		gap:0;
	}
	#diagram-page-8 .left{
		width:100% !important;
		padding:100px 0px !important;
	}
	#diagram-page-8 .right{
		display:none;
	}
	#sphere-with-text{
		width:95vw;
		height:95vw;
	}
	#sphere-with-text p{
		font-size:2.9vw;
	}
	#diagram-page-9{
		display:flex;
	}
	#diagram-page-9 p{
		font-size:11px;
		margin:10px 10px;
	}

	.split{
		flex-direction:column;
		gap:10px !important;
		margin:0px !important;
	}
	.split p{
		padding:10px 20px;
		font-size:12px !important;
	}
	.divider{
		display:none;
	}
	#diagram .ruler{
		display:none !important;
	}
}

@media (max-width: 375px){
	#diagram-page-1 .split .left{
		display:flex;
		justify-content:center;
		align-items:center;
	}
	#diagram-page-1 .split .left img{
		width:80%;
	}
	#diagram-page-2 .split .left p{
		font-size:11px !important;
		line-height:14px;
		padding:10px 40px;
	}
	#diagram .highlight-image.line{
		margin:0px 30px !important;
		padding:10px 10px !important;
	}
	#diagram .highlight-image.line p{
		font-size:8px !important;
	}
	#diagram-page-3 .stack p{
		margin-bottom:10px;
	}
	#diagram-page-5 .alone{
		font-size:11px;
	}
	#diagram-page-6 p{
		font-size:11px;
	}
	#sphere-with-text p{
		font-size:2.8vw !important;
	}
}