.share_menu_button{
	/* background: linear-gradient(-30deg, #faca30, #f7b500); */
	background: var(--element-color);
	border: none;
	border-radius: var(--border-radius-m);
	height: 40px; width: 40px; min-height: 40px;
	z-index: 100;
	cursor: pointer;
	font-family: var(--font-family);
	color: var(--font-color);
	font-size: 16px;
	font-weight: 500;
   margin-top: 0px;
   transition: all .33s cubic-bezier(1,.5,.5,0);
}
.share-buttons {
   display: flex; flex-direction: column;
   gap: 4px; border-radius: var(--border-radius-m);
   max-height: 40px; min-height: 40px; max-width: 40px;
   overflow: hidden;
   transition: all .33s cubic-bezier(0,.5,.5,1);
 }
 .share-buttons:hover{
   max-height: 512px;
   transition: all .33s cubic-bezier(1,.5,.5,0);
 }
 .share-buttons:hover .share-button{
   margin-top: 0px;
   transform: scale(1);
   transition: all .33s cubic-bezier(0,.5,.5,1);
 }
 .share-buttons:hover .share_menu_button{
   margin-top: -44px;
   transition: all .33s cubic-bezier(0,.5,.5,1);
 }
 .share-button {
   border: none;
   color: #fff;
   border-radius: var(--border-radius-m);
   cursor: pointer;
   font-size: 18px;
   text-align: center;
   width: 40px; height: 40px; min-height: 40px;
   margin-top: -44px;
   transform: scale(0.9);
   transition: all .25s cubic-bezier(1,.5,.5,0);
 }
/*  .share-button:hover {
   transform: scale(1)!important;
   transition: all .25s cubic-bezier(0,.5,.5,1);
 } */
 .facebook {
   background-color: #3b5998;
 }
 .twitter {
   background-color: #1da1f2;
 }
 .linkedin {
   background-color: #0077b5;
 }
 .whatsapp {
   background-color: #25d366;
 }
 .email {
   background-color: var(--element-color);
}

 /* Capture */
 .capture-area{
  display: flex;
  position: absolute;
  top: 0; left: 0;
  width: calc(100vw - 48px); height: 100vh;
  margin-left: 24px; margin-right: 24px;
  /* background: #00000080; */
  z-index: 1000;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.capture-button {
  border: none;
  color: var(--font-color);
  border-radius: var(--border-radius-m) var(--border-radius-m) var(--border-radius-m) var(--border-radius-m);
  background: var(--element-color);
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  width: 40px; height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .25s cubic-bezier(0,.5,.5,1);
  z-index: 200;
  /* display: none; */
}
.capture-button:hover{
  background: var(--element-color-2);
  transition: all .33s cubic-bezier(0,.5,.5,1);
}
/* .capture-button:hover{
  width: 48px;
  border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
  transition: all .25s cubic-bezier(0,.5,.5,1);
} */
.capture-button i{
  margin-top: -1px;
  color: var(--font-color); 
}
.capture-container{
  display: flex;
  flex-direction: column;
  /* position: absolute;
  top: 50%; left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* position: relative; */
  z-index: 500;
  width: auto; max-width: 640px; height: auto;
  background: var(--bg-color-2);
  border-radius: 16px;
  border: 1px solid var(--border-color);

  padding: 24px 24px 16px 24px;
  gap: 12px;

  transition: transform .5s ease;
  transform: scale(1);
  transform-origin: center center;

  box-shadow: 0 0 128px #00000040;
  pointer-events: all;
}
.capture-container-closed{
  transform: scale(0);
  transition: transform .25s ease!important;
}
#capture_image{
  width: 100%; height: auto;
  /* min-width: 640px; min-height: 360px; */
  object-fit: contain;
  border-radius: 8px;
  margin-top: 12px;
  /* opacity: 0; */
  transition: all .33s ease;
}
.capture-header{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: top;
}
.capture-close-button{
  width: 20px; height: 20px;
  cursor: pointer;
}
.capture-share-button {
  border: none;
  color: #fff;
  border-radius: var(--border-radius-m);
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  width: 32px; height: 32px; min-height: 32px;
  transition: all .25s cubic-bezier(1,.5,.5,0);
}
#capture_download {
  border: none;
  color: #fff;
  border-radius: var(--border-radius-m);
  background: var(--element-color);
  font-family: var(--font-family);
  cursor: pointer;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  width: auto; height: 32px; min-height: 32px;
  padding: 0 12px;
  transition: all .25s cubic-bezier(1,.5,.5,0);
}
#capture_download:hover{
  background: var(--element-color-2);
  transition: all .33s cubic-bezier(0,.5,.5,1);
}
#capture_download i{
  margin-right: 8px!important;
}
#capture h1{
  font-size: 20px;
  font-weight: 600!important;
  line-height: 20px;
  color: var(--font-color);
  font-family: var(--font-family);
  margin: 0!important;
}
#capture h2{
  font-size: 14px;
  font-weight: 600!important;
  line-height: 20px;
  color: var(--font-color);
  font-family: var(--font-family);
}
#capture p{
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--font-color);
  font-family: var(--font-family);
  margin-right: 8px;
}
#imageLoader{
  /* aspect-ratio: 16/9; */
  width: 640px; height: 360px;
  justify-content: center;
  align-items: center;
  transition: all .33s ease;
}