.acontent-container {
	width: 920px;
	max-width: 920px;
	height: 150px;
	margin-left: 320px;
	margin-top: 150px;
}

#atitle {
	font-weight: bold;
	color: #fe4601;
	margin-left: 230px;
	font-size: 20px;
}

#atext {
	width: 430px;
	margin-left: 230px;
	font-size: 15px;
	color: grey;
	text-align: justify;

}


.acontainer {
	max-width: 920px;
	width: 920px;
	height: 400px;
	position: relative;
	margin-left: 320px;
	display: flex;
	flex-wrap: wrap;
}

.acontent {
	width: 360px;
	position: absolute;
	top: 30px;
	text-align: center;
	font-size: 16px;
	color: #fe4601;
	font-weight: bold;
}

.acontent2 {
	position: absolute;
	top: 30px;
	right: 50px;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
	width: 400px;
	color: #fe4601;
}



.ahexagon-container {
	width: 110px;
	height: 220px;
	position: relative;
	margin-top: 120px;
	margin-left: 0px;
}

.ahexagon {
	width: 80px;
	height: 45.5px;
	background: #fff;
	position: absolute;
	top: 20%;
	left: 15px;
	z-index: 1;
	flex-direction: row;
	cursor: pointer;

}

.ahexagon:before,
.ahexagon:after {
	content: "";
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;

}

.ahexagon:before {
	transform: rotate(60deg);
}

.ahexagon:after {
	transform: rotate(-60deg);
}


.ahexagonA {
	width: 110px;
	height: 63px;
	background-color: #4B0082;
	position: absolute;
	top: 35px;
	left: 0px;
	cursor: pointer;
}


.ahexagonA:before,
.ahexagonA:after {
	content: "";
	width: 100%;
	height: 100%;
	background: #4B0082;
	position: absolute;
}

.ahexagonA:before {
	transform: rotate(60deg);
}

.ahexagonA:after {
	transform: rotate(-60deg);
}

.acorrect-icon {
	position: absolute;
	top: 42px;
	font-size: 50px;
	z-index: 1;
	left: 33px;
	transform: rotate(-10deg);
	color: #4B0082;
	z-index: 1;
}

.acorrect-icon:hover {
	color: #fe4601;
	transition: 1.2s;
	cursor: pointer;
}



#asevenfive {
	position: absolute;
	top: 131px;
	left: 21px;
	font-family: "tahoma";
	font-size: 27px;
	cursor: pointer;
}

#asevenfive:hover {
	color: #fe4601;
	transition: 1s all;
}


#ayes {
	position: absolute;
	top: 160px;
	left: 30px;
	font-family: "Tahoma";
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
}

#ayes:hover {
	color: #fe4601;
	transition: 1s all;
}

/* hexogen 2 */

.ahexagon-container2 {
	width: 110px;
	height: 220px;
	position: relative;
	margin-top: 120px;
	margin-left: 10px;

}

.ahexagon-containerA {
	width: 200px;
	height: 320px;
	position: absolute;
	margin-left: 17px;
}

.aquestion-icon {
	position: absolute;
	top: 45px;
	left: 37px;
	z-index: 1;
	font-size: 1;
	font-size: 48px;
	color: #4B0082;
}

.aquestion-icon:hover {
	transition: 1s;
	color: #fe4601;
	cursor: pointer;
}


#aoneehight {
	position: absolute;
	top: 131px;
	left: 21px;
	font-size: 27px;
	font-family: "tahoma";
	cursor: pointer;
}

#aoneehight:hover {
	color: #fe4601;
	transition: 1s;
}

#aldontsure {
	position: absolute;
	top: 160px;
	text-align: center;
	left: 10px;
	font-family: "tahoma";
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
}

#aldontsure:hover {
	color: #fe4601;
	transition: 1s;
}


/*hexagon 3 */
.ahexagon-container3 {
	width: 110px;
	height: 220px;
	position: relative;
	margin-top: 120px;
	margin-left: 10px;
}

.afalse-icon {
	position: absolute;
	top: 42px;
	left: 36px;
	z-index: 1;
	font-size: 55px;
	cursor: pointer;
	color: #4B0082;
}

.afalse-icon:hover {
	transition: 1.2s all;
	color: #fe4601;
	cursor: pointer;
}


#aseven {
	position: absolute;
	top: 131px;
	left: 32px;
	font-size: 27px;
	font-family: "tahoma";
	cursor: pointer;
}

#aseven:hover {
	color: #fe4601;
	transition: 1.2s;
}

#aNo {
	position: absolute;
	top: 160px;
	left: 34px;
	font-family: "Tahoma";
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
}

#aNo:hover {
	color: #fe4601;
	transition: 1.2s;
}


/* ..........................*/

#acircle {
	width: 570px;
	height: 320px;
	position: relative;
	right: 0px;
	margin-top: 77px;
	display: flex;
	flex-wrap: wrap;
	cursor: pointer;
	z-index: 2;
}



#abounce {
	width: 230px;
	height: 230px;
	border: 10px solid #E6E6FA;
	position: absolute;
	top: 40px;
	left: 72px;
	border-radius: 50%;
}


#acircle-overlay {
	position: absolute;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	right: 55px;
	top: 58px;
}

#acircle-overlay:hover {
	background-color: #DCDCDC;
	transition: 1.2s;
	cursor: pointer;
}

.adaire {
	position: absolute;
	width: 215px;
	height: 215px;
	border-radius: 50%;
	margin-left: 80px;
	margin-top: 48px;
	overflow: hidden;
	z-index: 1;
}



#apiechart1 {
	position: absolute;
	top: 0px;
	left: 38px;
	width: 137px;
	height: 135px;
	background-color: #7519b0;
	border-top-right-radius: 30px;
	border-top-left-radius: 30px;
}

#apiechart1:hover {
	background-color: #fe4601;
	transition: 1.5s;
	cursor: pointer;
}

#afour {
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 13px;
	left: 92px;
	font-weight: bold;
}

#acircleD {
	width: 14px;
	position: absolute;
	top: 33px;
	z-index: 1;
	left: 105px;
}


#apiechart2 {
	position: absolute;
	top: 38px;
	left: -30px;
	width: 95px;
	height: 115px;
	background: #8437bf;
	border-top-right-radius: 100%;
	transform: rotate(-123deg);
}

#apiechart2:hover {
	background-color: #fe4601;
	transition: 1.5s;
	cursor: pointer;
}


#afourtyfour {
	color: #fff;
	font-size: 13px;
	position: absolute;
	top: 69px;
	left: 163px;
	z-index: 1;
	font-weight: bold;
}

#afourtyfourPng {
	width: 14px;
	position: absolute;
	top: 88px;
	z-index: 1;
	left: 174px;
}



#apiechart3 {
	position: absolute;
	width: 98px;
	height: 112px;
	background: #5d1496;
	top: 25px;
	left: 149px;
	transform: rotate(30deg);
	border-top-right-radius: 80%;
	border-bottom-right-radius: 25%;
}


#apiechart3:hover {
	background-color: #fe4601;
	transition: 1.5s;
	cursor: pointer;
}


#athirtysix {
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 157px;
	left: 120px;
	z-index: 1;
	font-weight: bold;
}

#athirtysixPng {
	width: 17px;
	position: absolute;
	top: 178px;
	z-index: 1;
	left: 133px;
}



#apiechart4 {
	position: absolute;
	width: 120px;
	height: 130px;
	background: #5d1496;
	top: 105px;
	left: 25px;
	transform: rotate(70deg);
	border-bottom-right-radius: 50%;
}

#apiechart4:hover {
	background-color: #fe4601;
	transition: 1.5s;
	cursor: pointer;
}


#anine {
	position: absolute;
	font-size: 14px;
	top: 134px;
	left: 30px;
	z-index: 1;
	color: #fff;
	font-weight: bold;
}

#acircleNinePng {
	width: 17px;
	position: absolute;
	top: 155px;
	z-index: 1;
	left: 40px;
}

#apiechart5 {
	position: absolute;
	width: 140px;
	height: 99px;
	background-color: #300b54;
	top: 130px;
	left: 62px;
	transform: rotate(-59deg);
	border-bottom-left-radius: 50%;
}

#apiechart5:hover {
	background-color: #fe4601;
	transition: 1.5s;
	cursor: pointer;
}


#asix {
	position: absolute;
	font-size: 16px;
	color: #fff;
	left: 18px;
	top: 67px;
	z-index: 1;
	font-weight: bold;
}

#acircleSixPng {
	width: 17px;
	position: absolute;
	top: 90px;
	z-index: 1;
	left: 27px;
}


#atotal {
	position: absolute;
	top: 34%;
	left: 60.5%;

}


#apointer {
	width: 300px;
	height: 40px;
	position: relative;
	background: #7519b0;
	text-align: center;

}



#apointer:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

}

#apointer:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #7519b0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/*apointer1 */
#apointer1 {
	width: 300px;
	height: 40px;
	position: relative;
	background: #5d1496;
}


#apointer1:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

}

#apointer1:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #5d1496;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* pointer 2 */

#apointer2 {
	width: 300px;
	height: 40px;
	position: relative;
	background: #300b54;

}

#apointer2:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

}

#apointer2:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #300b54;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* pointer 3 */

#apointer3 {
	width: 300px;
	height: 40px;
	position: relative;
	background: #4b0984;


}

#apointer3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

}

#apointer3:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #4b0984;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}

/* pointer 4 */

#apointer4 {
	width: 300px;
	height: 40px;
	position: relative;
	background: #8437bf;
	cursor: pointer;

}

#apointer4:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;

}

#apointer4:before {
	content: "";
	position: absolute;
	right: -20px;
	bottom: 0;
	width: 0;
	height: 0;
	border-left: 20px solid #8437bf;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
}



#aoverwrite1 {
	position: absolute;
	color: #fe4601;
	top: 12px;
	left: 110px;
	color: #fff;
	z-index: 999;
	font-size: 1em;
}

#aoverwrite1:hover {
	color: #ffa500;
	transition: 1s all;
	cursor: pointer;
}

#ad {
	width: 16px;
	position: absolute;
	top: 12px;
	left: 286px;
	z-index: 1;
}

#aoverwrite2 {
	color: #fff;
	position: absolute;
	left: 112px;
	top: 54px;
	z-index: 999;
	font-size: 1em;
}

#aoverwrite2:hover {
	color: #ffa500;
	transition: 1s all;
	cursor: pointer;
}

#ac {
	width: 16px;
	position: absolute;
	color: green;
	top: 50px;
	left: 284px;
	z-index: 1;
}

#aoverwrite3 {
	position: absolute;
	color: #fff;
	left: 113.5px;
	top: 92px;
	z-index: 999;
	font-size: 0.9em;
}

#aoverwrite3:hover {
	color: #ffa500;
	transition: 1s all;
	cursor: pointer;
}

#aim {
	width: 18px;
	position: absolute;
	color: green;
	top: 90px;
	left: 284px;
	z-index: 1;
}


#aoverwrite4 {
	position: absolute;
	top: 0;
	color: #fff;
	left: 113px;
	top: 124px;
	z-index: 999;
	font-size: 0.8em;
}

#aoverwrite4:hover {
	color: #ffa500;
	transition: 1s all;
	cursor: pointer;
}

#ae {
	width: 20px;
	position: absolute;
	color: green;
	top: 128px;
	left: 284px;
	z-index: 1;
}

#aoverwrite5 {
	position: absolute;
	top: 172px;
	left: 112px;
	color: #fff;
	z-index: 999;
	font-size: 1em;
}

#aoverwrite5:hover {
	color: #ffa500;
	transition: 1s all;
	cursor: pointer;
}

#ab {
	width: 18px;
	position: absolute;
	color: green;
	top: 174px;
	left: 284px;
	z-index: 1;
}