/*profile*/
.profile_title{
	position: absolute;
	top: 0%;
	left: 0px;
	width: 100%;
	height: 12%;
	text-align: center;
}
	
.profile_container {
    position: absolute;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.7);
	z-index: 1000;
}

.profile_bg{
	position: absolute;
    width: 90%;
    height: 80%;
    left: 5%;
    /* margin-right: auto; */
    top: 16%;
    background-color: rgba(255, 255, 255, 1);
    border: 5px solid #633712;
    border-radius: 10px;
}
.content_container{
	display: flex;
	height: 85%;
	padding: 2%;
}
.game_icon_container{
	width: 70%;
	display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
}

.game_icon{
	width: 30%;
	display: flex;
	position: relative;
}

.star_icon{
	position: absolute;
    width: 50%;
    left: 25%;
    bottom: 14%;
}

.chart_container{
	width: 30%;
	align-items: center;
    display: flex;
}

.chart_frame{
	width: 100%;
	padding: 5%;
	border: 5px solid #7a0e0b;
	border-radius: 10px;
	position:relative;
}

.chart_desc{
	position: absolute;
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a1014;
    font-weight: bold;
    flex-direction: column;
    font-size: 16px;
    line-height: 20px;
}

.btn_container{
	width: 100%;
	height: 15%;
	padding: 1% 2%;
}
.btn_container>img{
	cursor: pointer;
}
.download_cert_btn{
	float:right;
	height: 100%;
}


/*popup*/
.popup_container {
    position: absolute;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.7);
	z-index: 1000;
}
.popup_bg{
	position: absolute;
    width: 90%;
    height: 80%;
    left: 5%;
    top: 14%;
    background-color: rgba(255, 255, 255, 1);
    border: 5px solid #633712;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	
	padding-bottom: 6%;
}
.download_cert_btn_deco{
    position: absolute;
    width: 16%;
    right: -5%;
    top: -12%;
}
.title{
	position: absolute;
    bottom: 100%;
    left: 3%;
    width: 20%;
}

.title.long{
    width: 30%;
}

.gamezone_content_container{
	width:60%;
}

.gamezone_btn_container{
	width:14%;
	left:43%;
	cursor: pointer;
	bottom: 4%;
	position: absolute;
}
.gamezone_btn_container_center{
	width:14%;
	left:43%;
	cursor: pointer;
	bottom: 4%;
	position: absolute;
}
.gamezone_btn_container_center.cert{
	width:16.5%;
	left: 41.75%;
}
.gamezone_btn_container_right{
	width:14%;
	right:5%;
	cursor: pointer;
	bottom: 4%;
	position: absolute;
}
.gamezone_btn{
	cursor: pointer;
}
.popup_btn:hover, 
.prev_btn:hover, 
.next_btn:hover, 
.gamezone_btn:hover {
	transition: all 500ms ease;
	transform: scale(1.05);
	opacity: 0.9;
}


#gamelock_popup>.popup_bg{
	width: 60%;
    left: 20%;
    height: 70%;
    top: 15%;
}


#gamezone_learningzone_deco{
	position: absolute;
    bottom: 6%;
    right: 2%;
    width: 25%;
	z-index: 2;
}

#lz_link1{
	position: absolute;
    top: 2%;
    left: 3.5%;
    width: 24%;
    height: 49%;
	z-index:2;
}
#lz_link2{
	position: absolute;
    top: 2%;
    left: 38%;
    width: 24%;
    height: 49%;
	z-index:2;
}
#lz_link3{
	position: absolute;
    top: 2%;
    left: 72%;
    width: 24%;
    height: 49%;
	z-index:2;
}
#lz_link4{
	position: absolute;
   top: 51%;
    left: 3%;
    width: 25%;
    height: 49%;
    z-index: 2;
}
#lz_link5{
	position: absolute;
    top: 51%;
    left: 38%;
    width: 24%;
    height: 49%;
	z-index:2;
}

#cc_link1{

	position: absolute;
   top: 6%;
    left: 16%;
    width: 28%;
    height: 89%;
	z-index:2;
}
#cc_link2{

	position: absolute;
	top: 6%;
    left: 56%;
    width: 28%;
    height: 89%;
	z-index:2;
}

.lz_link:hover,
.cc_link:hover{
	transition: all 500ms ease;
	transform: scale(1.05);
	opacity: 0.9;
	background-color: rgba(255,255,255,0.35);


}