.btn-share {
  position:fixed;
  top:15px; right:15px;
  width:45px; height:45px;
  border-radius:50%;
  background-color:#fdf8f3;
  box-shadow: 1px 2px 5px rgba(203, 151, 100, 0.2);
  z-index:9;
  text-align:center;
  line-height:42px;
  color:#555;

  font-size:1.3rem;
  font-weight:300;
  cursor:pointer;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.container {
  min-height:calc(100vh - 160px);
  padding:30px;
  position:relative;
}
.main {
  position:relative;
}
.main-container {
  position:relative;
  height:100vh;
}

.main-bg-container {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  z-index:1;
  opacity:0.5;
}

.menu-container > nav {
  position:relative;
}
.menu-container.relativeList {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index:2;
}
.pg-content-box.ab {
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  min-width:260px; max-width:350px; margin:0 auto;
}
.pg-content-box.re {
  position:relative;
  z-index:2;
  min-width:260px; max-width:350px; margin:0 auto;
}
.menu-container li {
  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.menu-container li:hover {
  animation-name: fill-in-bg;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.menu-container.relativeList ul > li {
  text-align:center;
  padding:10px 20px;
  border:1px solid #fff;
  border-radius:35px;
  margin:15px;
  overflow:hidden;
  position:relative;
  opacity:0.8;
  cursor:pointer;
}
.menu-container.absoluteList {
  position:fixed;
  left:0px; right:0px; top:0; height:50px;
  background-color:#fff;
  z-index:3;
  box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.2);

  animation-name: move-in;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes move-in {
  from {
    top:-50px;
  }
  to {
    top:0px;
  }
}
.menu-container.absoluteList ul {
  display:flex;
}
.menu-container.absoluteList ul > li {
  #width:calc(100% / 3);
  text-align:center;
  line-height:50px;
  margin:0 15px;
  border-radius:35px;
  overflow:hidden;
  cursor:pointer;
  color:#222;
}
.menu-bar {
  display:none;
  position:absolute;
  left:0px; bottom:0px; height:3px;
  background-color:#d30000;
  z-index:3;
}

@keyframes fill-in-bg {
  from {
    opacity:0;
  }
  to {
    opacity:0.8;
  }
}

.profile {
  background-color:#faefe4;
}

.copyright {
  font-size:0.88rem; text-align:center; color:#f4f4f4;
}

.image-box {
  position:relative;
  width:100%; padding-bottom:100%; overflow:hidden;
}
.image-box > div:first-child {
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
}
.image-box > div:first-child > img {
  width:100%; height:100%; object-fit: cover;
}


.profile .user-name {
  margin:10px 0; text-align:center;
  font-size:1.2rem;
  color:rgb(34, 34, 34);
  #text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  cursor:pointer;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-icon {
  text-align:center; margin:0 auto;
}
.profile .profile-info {
  margin-top:10px;
  text-align:center; color:#222;
  font-weight:300;
}
.profile .profile-social-icons {
  text-align:center;
  margin:30px 0 0 0;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-social-icons > i:hover {
  animation-name: fill-in-bg;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.profile .profile-social-icons > i {
  color:var(--inblu-color); opacity:0.9;
  font-size:1.7rem;
  margin:0 8px;
  cursor:pointer;
}
.profile .profile-social-icons > i:nth-child(2) {
  font-size:1.86rem;
}
.profile .profile-social-icons > i:nth-child(3) {
  font-size:1.67rem;
}
.profile .profile-letter {
  margin-top:20px;
  font-size:0.88rem;
  font-weight:300;
  color:#222;
  background-color:#fdf8f3;
  padding:15px;
  border-radius: 5px;
  letter-spacing: -0.05rem;
  word-spacing: -0.05rem;
}
.profile .profile-box {
  margin:30px 0 0 0;
}
.profile .profile-box li:hover {
  animation-name: box-size-up;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes box-size-up {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.02);
  }
}
.profile .profile-box li {
  height:40px;
  box-shadow: 1px 2px 5px rgba(203, 151, 100, 0.2);
  border-radius:30px; overflow:hidden;
  padding:5px;
  background-color:#fdf8f3;
  color:#222; text-align:center;
  margin:10px 0;
  display:flex;
  cursor:pointer;

  -webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
.profile .profile-box li > div:first-child {
  width:40px;
}
.profile .profile-box li > div:last-child {
  width:calc(100% - 40px);
  line-height:38px;
  font-weight:400; color:#555;
}

.profile .contact-mail {
  margin-top:5px; font-size:0.9rem;
}
.profile .contact-mail > a {
  color:#999;
}

.profile .media {
  margin:30px 0 0 0;
}

.profile .ani {
  font-weight:500;

  animation-name: font-moving;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

.copyright {
  margin:0 0 30px 0;
  font-size:0.6rem;
  color:#aaa; text-align:center;
}

@keyframes font-moving {
  from {
    margin-left:0px;
  }
  to {
    margin-left:10px;
  }
}

@media ( max-width: 499px ) {
  .profile .price {
    font-size:1rem;
  }
}