.top-title {
	color: #2578b2;
	position: absolute;
	left: 0%;
	top: 2%;
	width: 100%;
	z-index: 15;
	font-size: 5vw;
	font-family: andika;
	border-bottom: 0.4vmin solid #434343;
}
@media(min-aspect-ratio:4/3){
	.top-title{
		font-size: 6.5vh;
	}
}
.numline-block{
	position: absolute;
	top: 12.5%;
	left: 2.5%;
	width: 95%;
	height: 20%;
	/*overflow: hidden;*/
}
#line-svg{
	width: 100%;
	height: 100%;
	/*z-index: 2;*/
}
.main-line{
	position: absolute;
	top: 45%;
	left: 2%;
	width: 96%;
	height: 1.5%;
	transform: translateY(-50%);
	background-color: black;
	min-height: 2px;
}
.mark-container{
	position: absolute;
	top: 45%;
	left: 2.5%;
	width: 95%;
	height: 20%;
	transform: translateY(-50%);
	overflow: hidden;
}

.label-container{
	position: absolute;
	top: 60%;
	left: 2.5%;
	width: 95%;
	height: 20%;
	transform: translateY(-50%);
}
.mark-element{
	position: absolute;
	width: 4.5%;
	height: 100%;
	top: 0%;
	transform: translateX(-50%);
}
.mark-line{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0%;
	height: 100%;
	width: 0.1vw;
	background-color: black;
}
.mark-element>p{
	position: absolute;
	text-align: center;
	left: 0%;
	top: 110%;
	width: 100%;
	font-size: 2vw;
}

@media(min-aspect-ratio:4/3){
	.mark-element>p{
		font-size: 2.8vh;
	}
}

.mark-hollow-circle, .mark-filled-circle{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	height: 89.3%;
	border: 0.3vmin solid #44546a;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	z-index: 5;
}
.mark-filled-circle{
	background-color: #000000;
}
.slanted-line{
	position: absolute;
	width: 0.2vw;
	bottom: 50%;
	left: 50%;
	background-color: #44546a;
	transform-origin: 50% 100%;
}
.straight-line{
	position: absolute;
	width: 0.2vw;
	bottom: 50%;
	left: 50%;
	height: 150%;
	transform: translateX(-50%);
	background-color: #44546a;
}
.roof-1{
	position: absolute;
	transform: translateY(50%);
	height: 200%;
	width: 500%;
	bottom: 200%;
}
.roof-1>p{
	position: absolute;
	bottom: 50%;
	width: 100%;
	text-align: center;
	font-size: 2vw;
	font-family: abeezee;
	font-weight: normal;
}

.roof-1>img, .roof-1>svg{
	position: absolute;
	top: 50%;
	height: 25%;
	transform: translateY(-50%);
	width: 100%;
	left: 0%;
}
@media(min-aspect-ratio:4/3){
	.small-text{
		font-size: 2.8vh;
	}
}
.mark-container-2{
	overflow: visible;
}




.positive-number, .negative-number{
	position: absolute;
	top: 37.5%;
	width: 50%;
	text-align: center;
	font-family: poppins;
	font-size: 3.2vw;
}

@media(min-aspect-ratio:4/3){
	.positive-number, .negative-number{
		font-size: 4.5vh;
	}
}
.negative-number{
	left: 0%;
	color: #d14125;
}
.positive-number{
	left: 50%;
	color: #1155cc;
}
.zero-number{
	position: absolute;
	top: 32.5%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 3.2vw;
	font-weight: bold;
	font-family: poppins;
	color: black;
}
@media(min-aspect-ratio:4/3){
	.zero-number{
		font-size: 4.5vh;
	}
}
.line-caption-1{
	position: absolute;
	top: 47.5%;
	left: 20%;
	width: 80%
	text-align: center;
	font-size: 3.2vw;
	font-family: poppins;
	color: black;
}

@media(min-aspect-ratio:4/3){
	.line-caption-1{
		font-size: 4.5vh;
	}
}

.prop-list{
	position: absolute;
	top: 57.5%;
	left: 5%;
	width: 90%;
	height: 40%;
	background-color: #feffdf;
	border: 0.5vmin solid #d9d9d9;
	text-align: left;
	font-size: 3vw;
	color: black;
	font-family: poppins;
	padding: 2.5% 5%;
}
@media(min-aspect-ratio:4/3){
	.prop-list{
		font-size: 4.2vh;
	}
}

.list-1{
	margin-left: 10%;
	margin-top: 2%;
	list-style-type: disc;
	font-family: andika;
}

.label-highlight{
	animation: label-highlight 1s linear 1s 3;
	-webkit-animation: label-highlight 1s linear 1s 3;
}
@-webkit-keyframes
label-highlight {
	50% {color: red;}
}
@keyframes
label-highlight {
	50% {color: red;}
}




.text-1{
	position: absolute;
	text-align: center;
	left: 0%;
	top: 15%;
	width: 100%;
	z-index: 15;
	font-size: 3vw;
	color: #222222;
}
@media(min-aspect-ratio:4/3){
	.text-1{
		font-size: 4.2vh;
	}
}
.numline-2{
	top: 25%;
}
.numline-3{
	top: 30%;
}
.numline-4{
	top: 65%;
}
.numline-5{
	top: 60%;
}
.bottom-texts{
	position: absolute;
	top: 52.5%;
	left: 15%;
	width: 70%;
	background-color: #feffdf;
	border: 0.3vmin solid #d9d9d9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	font-size: 2.7vw;
	font-family: poppins;
	color: #222222;
	height: 45%;
	padding: 2%;
}
.bottom-texts-3{
	top: 45%;
	height: 52.5%;
	padding: 0%;
	justify-content: space-around;
}
.bottom-texts>p{
	width: 100%;
	text-align: center;
}
@media(min-aspect-ratio:4/3){
	.bottom-texts{
		font-size: 3.6vh;
	}
}

.bottom-big-title{
	font-size: 3.4vw;
	font-weight: bold;
}
@media(min-aspect-ratio:4/3){
	.bottom-big-title{
		font-size: 4.6vh;
	}
}
.small-text{
	font-size: 2vw;
	font-weight: normal;
}
@media(min-aspect-ratio:4/3){
	.small-text{
		font-size: 2.8vh;
	}
}

.bottom-list{
	margin-left: 10%;
	margin-top: 2%;
	height: 60%;
	width: 90%;
	text-align: left;
	list-style-type: disc;
	font-size: 2.3vw;
}
.bottom-list-3{
	margin-top: 0%;
}
@media(min-aspect-ratio:4/3){
	.bottom-list{
		font-size: 3vh;
	}
}
.bottom-text-2{
	text-align: left;
	font-size: 2.5vw;
	padding: 2.5% 5%;
}
@media(min-aspect-ratio:4/3){
	.bottom-text-2{
		font-size: 3.3vh;
	}
}
.bottom-text-2>p{
	text-align: left;
}
.bottom-captions{
	top: 80%;
}


.s2-text-1{
	position: absolute;
	top: 25%;
	left: 2%;
	width: 96%;
	font-size: 3vw;
	font-family: poppins;
	color: #222222;
}
@media(min-aspect-ratio:4/3){
	.s2-text-1{
		font-size: 4vh;
	}
}
.greater-than, .less-than{
	position: absolute;
	width: 45%;
	left: 5%;
	bottom: 41%;
	text-align: center;
	font-size: 3.2vw;
	font-family: poppins;
	color: #222222;
}
@media(min-aspect-ratio:4/3){
	.greater-than, .less-than{
		font-size: 4.4vh;
	}
}
.greater-than{
	left: 50%;
}
.arrow-red, .arrow-blue{
	position: absolute;
	width: 44%;
	bottom: 35%;
	right: 50.5%;
}
.arrow-blue{
	left: 50.5%;
}


.s3-text{
	display: none;
	position: absolute;
	font-size: 3vw;
	text-align: center;
	font-family: andika;
	color: #222222;
	width: 25%;
}
@media(min-aspect-ratio:4/3){
	.s3-text{
		font-size: 4vh;
	}
}
.s3-text-1{
	display: block;
	top: 20%;
	left: 2%;
	width: 96%;
	text-align: left;
}
.s3-text-2{
	top: 30%;
	left: 12.5%;
}
.s3-text-3{
	top: 30%;
	left: 37.5%;
}
.s3-text-4{
	top: 39%;
	left: 12.5%;
}
.s3-text-5{
	top: 39%;
	left: 37.5%;
}
.s3-text-6{
	top: 39%;
	left: 62.5%;
	text-align: left;
}
.number-highlight{
	animation: number-highlight 1s linear 2;
	-webkit-animation: number-highlight 1s linear 2;
}
@-webkit-keyframes
number-highlight {
	50% {color: red;}
}
@keyframes
number-highlight {
	50% {color: red;}
}
.font-andika{
	font-family: andika;
}