.profileMainContainer { position: fixed; z-index: 1600; top: -200%; left: 0px; width: 100%; height: 100%; background-color: #222222; padding: 20px; box-sizing: border-box; overflow: scroll; }

@keyframes showProfileAni { from { top: -200%; } to { top: 0px; } }
.showProfile { animation-name: showProfileAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hideProfileAni { from { top: 0px; } to { top: -200%; } }
.hideProfile { animation-name: hideProfileAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }

.profileLogo { position: absolute; top: 0px; left: 0px; padding: 20px; font-size: 23px; font-weight: bold; height: 30px; }
.profileEdit { position: absolute; top: 0px; right: 120px; padding: 20px; width: 20px; height: 20px; cursor: pointer; background-color: #1295fa; }
.profileShare { position: absolute; top: 0px; right: 60px; padding: 20px; width: 20px; height: 20px; cursor: pointer; background-color: #ff8800; }
.profileClose { position: absolute; top: 0px; right: 0px; padding: 20px; width: 20px; height: 20px; cursor: pointer; background-color: #eb1862; }
.publicProfile { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden; }

.profileSectionTitle { width: 100%; font-weight: 700; font-size: 19px; color: #555555; margin-bottom: 20px; }
.profileHeader { width: 100%; padding-bottom: 20px; padding-top: 60px; margin-bottom: 20px; border-bottom: 1px solid #333333; }
.profileAvatarDiv { float: left; width: 80px; height: 80px; }
.profileAvatarImage { width: 78px; height: 78px; border: 1px solid #333333; border-radius: 100%; }
.profileHeaderInformation { margin-left: 100px; width: auto; min-height: 80px; }
.profileNameEnglish { width: 100%; font-weight: 700; font-size: 17px; color: #FFFFFF; padding-top: 20px; }
.profileNameNative { width: 100%; font-weight: 300; font-size: 15px; color: #666666; margin-top: 5px; }
.profileBiography { width: 100%; color: #999999; padding-top: 20px; }
.profileRegionTags { width: 100%; border-bottom: 1px solid #333333; }
.profileCategoryTags { width: 100%; border-bottom: 1px solid #333333; }
.profileHandles { width: 100%; border-bottom: 1px solid #333333; margin-top: 20px; }

.profileRegionTag { display: inline-block; padding: 10px; margin-right: 20px; margin-bottom: 20px; font-size: 13px; color: #FFFFFF; background-color: #eb1862; border-radius: 3px; }
.profileCategoryTag { display: inline-block; padding: 10px; margin-right: 20px; margin-bottom: 20px; font-size: 13px; color: #FFFFFF; background-color: #1295fa; border-radius: 3px; }
.profileHandle { display: inline-block; width: 50%; text-align: center; padding-top: 20px; padding-bottom: 30px; margin-bottom: 20px; font-size: 12px; cursor: pointer; }




.profileEditContainer { position: fixed; z-index: 1600; top: -200%; left: 0px; width: 100%; height: 100%; background-color: #444444; padding: 20px; box-sizing: border-box; overflow: scroll; }

@keyframes showEditProfileAni { from { top: -200%; } to { top: 0px; } }
.showEditProfile { animation-name: showEditProfileAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hideEditProfileAni { from { top: 0px; } to { top: -200%; } }
.hideEditProfile { animation-name: hideEditProfileAni; animation-duration: 0.3s; animation-iteration-count: 1; animation-fill-mode: forwards; }