/*PINTEREST*/

.mems_scene {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scale-labels span b {
color: var(--golden);
}

.mems_box {
width:49%;
}

.mem_skills {
display: flex;
  flex-wrap: wrap;
	gap:15px;
}

.mem_skills img {
width: 210px;
height:auto;
}

.infopop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: hsla(0, 0%, 0%, 0.5); z-index: 1; opacity:0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; pointer-events: none; } .infopop:target { opacity:1; pointer-events: auto; } 

.infopop > .pop {
  background: var(--accent1);
  width: 630px;
  position: relative;
  margin: 10% auto;
  padding: 25px;
  z-index: 3;
}

.memrelas-request {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.memrelas-request h2 {
width: 100%;
  font-family: var(--mainfont);
  text-transform: lowercase;
  color: var(--golden);
  margin: 0px;
  margin-bottom: 20px;
}

.closepop { position: absolute; right: -5px; top:-5px; width: 100%; height: 100%; z-index: 2; }

.memt_box span {
background: var(--accent1);
  padding: 10px;
  position: relative;
  z-index: 3;
	border:1px solid var(--golden);
}

.mem_zodiac {
width: 50%;
  position: absolute;
  opacity: 5%;
  bottom: 20px;
  right: 50px;
}
.skill_descr {
overflow: auto;
  height: 315px;
  text-align: justify;
  padding-right: 20px;
}

.mem_trigger hr {
position: absolute;
  top: 6px;
  width: 80%;
  left: 70px;
}

.memw_transparent {
width: 847px;
  background: var(--accent1);
  position: absolute;
  top: 0px;
  z-index: 2;
  height: 569px;
  opacity: 0.85;
  left: 0px;
}

#pinterest-container { 
width: 860px;
  height: 570px !important;
  overflow: auto !important;
  box-shadow: none !important;
  border: none !important;
  position: absolute;
  top: 0;
  z-index: 1;
  left: -13px;
  opacity: 0.3;
}

#pinterest-container::-webkit-scrollbar-corner {
  background: #fff;
}

#pinterest-container::-webkit-scrollbar {
  width: 2.5px;
  background: #fff;
}

#pinterest-container::-webkit-scrollbar-thumb {
  background: #fff;
}

#pinterest-container [class$=_img] {
  display: block !important;
  box-shadow: none !important;
  border-radius: 0 !important;
border: none !important;

}

#pinterest-container [class$=_col] {
}

#pinterest-container [class$=_button] {
  display: none !important;
}

#pinterest-container [class$=_board] {
  box-shadow: none !important;
	background:none !important;
}

#pinterest-container span span {
  overflow: hidden !important;
  height: 70% !important;
    border: none !important;
    box-shadow: none !important;
	padding:0;
}

.point_active {
  background: var(--golden);
  width: 8px;
  height: 8px;
}

.point_inactive {
border: 1px solid var(--line);
  width: 7px;
  height: 7px;
}

.an_profile {
font-family: var(--mainfont);
  text-transform: lowercase;
  font-size: 20px;
  color: var(--golden);
  font-weight: bold;
  position: absolute;
  left: 29px;
  top: 250px;
  text-align: center;
  width: 25%;
}

.mem_user1 div {
text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 150%;
  width: 22%;
}

.mem_user1 div b {
color:var(--golden);
}

.mem_user1 {
display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
	margin-bottom:50px;
}

.mem_icon {
border: 1px solid var(--golden);
  padding: 5px;
}

.mem_look div {
text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 150%;
  width: 31%;
}

.mem_look {
display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 30px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
}

.mem_short b, .mem_short i {
color:var(--golden);
}

.mem_short {
text-align: justify;
	overflow: auto;
  height: 330px;
  line-height: 170%;
	margin-top: 15px;
	position: relative;
  z-index: 3;
}

.mem_user {
text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  text-transform: uppercase;
  font-size: 10px;
}

.mem_user span {
font-family: var(--mainfont);
  font-size: 30px;
  text-transform: lowercase;
}

.mem_fam {

}

.mem_descr {
display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
}

.memd b, .mem_look div b {
color:var(--golden);
}
.bending-profile-category {
	width: 47%; }

.bending-profile-category strong {
font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--golden);
  letter-spacing: 3px;
}

.memd {
text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 150%;
width: 22%;
}

.mem_quote {
width: 84.6%;
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 15px;
  font-family: var(--mainfont);
  color: var(--golden);
  justify-content: center;
}

.mem_top {
display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
	position: relative;
  z-index: 3;
}

.time_name {
font-family: var(--mainfont);
  font-size: 17px;
  text-transform: lowercase;
  color: var(--golden);
}

.time_desc {
text-align: justify;
  line-height: 170%;
  padding: 0px 14px;
  padding-top: 7px;
}

.time_date {
font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.mem_past {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  overflow: auto;
  height: 520px;
}

.mem_trigger {
  font-size: 10px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  margin-top: 20px;
}

.mem_trivia {
margin-top: 30px;
  text-align: justify;
  line-height: 200%;
  margin-bottom: 30px;
	height:310px;
	overflow:auto;
}

.mem_eig {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mem_chara1 {
  width: 48.6%;
}

.rpgskill_bit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 45%;
}

.skill_bit {
  font-size: 9px;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
}

.skill_type {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--golden);
  letter-spacing: 3px;
}

.skill_types {
  width: 49.2%;
}

.profil_skill {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
	height: 200px;
  overflow: auto;
}

.mem_element {
width: 100%;
  margin-top: 30px;
  position: relative;
  z-index: 3;
	display:flex;
	justify-content: center;
}

.bending-profile {
display: flex;
  flex-wrap: wrap;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

/*TABS*/

#tabmenu {
position: relative;
  margin: auto;
  margin-top: 50px;
}

#tabmenu [type="radio"] { display: none; }

#tabmenu [for^="tab"] {
position: absolute;
  top: 20px;
  border: 1px solid var(--line);
  padding: 3px;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  background: var(--accent1);
	justify-content:center;
}

#tabmenu [for="tab-1"] { 
right: 120px;
  top: 60px;
}

#tabmenu [for="tab-2"] { 
right: 120px;
  top: 100px;
}

#tabmenu [for="tab-3"] { 
right: 120px;
	top: 140px;
}
#tabmenu [for="tab-4"] { 
	right: 120px;
	top: 180px;
}

#tabmenu [for="tab-5"] { 
right: 120px;
	top: 220px;
}

#tabmenu [for="tab-6"] { 
right: 120px;
	top: 260px;
}

#tabmenu [for="tab-7"] { 
right: 120px;
	top: 300px;
}

#tabmenu .tab-content {
position: absolute;
  box-sizing: border-box;
  width: 80%;
  opacity: 0;
  overflow: hidden;
  box-sizing: border-box;
height: 570px;
  border: 1px solid var(--line);
  background: var(--accent1);
	padding:20px;
}

#tabmenu input:checked + label {
   color: var(--golden);
}

#tabmenu input:checked + label + .tab-content {
    z-index: 1;
    opacity: 1;
}


/*GRUNDGERÜST*/

.memw_left {
width: 33%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	position: relative;
}

.char-img {
--cut: 42px;
  --border: 2px;
  width: 250px;
  height: 400px;
  aspect-ratio: 1 / 1;
  padding: var(--border);
  background: var(--golden);
  -webkit-mask: radial-gradient(circle at top left, transparent var(--cut), #000 calc(var(--cut) + 1px)) top left, radial-gradient(circle at top right, transparent var(--cut), #000 calc(var(--cut) + 1px)) top right, radial-gradient(circle at bottom left, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom left, radial-gradient(circle at bottom right, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
  mask: radial-gradient(circle at top left, transparent var(--cut), #000 calc(var(--cut) + 1px)) top left, radial-gradient(circle at top right, transparent var(--cut), #000 calc(var(--cut) + 1px)) top right, radial-gradient(circle at bottom left, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom left, radial-gradient(circle at bottom right, transparent var(--cut), #000 calc(var(--cut) + 1px)) bottom right;
  mask-size: 51% 51%;
  mask-repeat: no-repeat;
}

.char-img::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;

  background-image: var(--img);
  background-size: cover;
  background-position: center;

  -webkit-mask: inherit;
  mask: inherit;
}

.ornament {
  position: relative;
  z-index: 3;
}

.mem_name {
width: 100%;
  margin-top: 70px;
  text-align: center;
  font-family: var(--mainfont);
  font-size: 30px;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}

.memw_right {
width:67%;
}

.mem_wrapper {
margin-top: 31px;
	display: flex;
  flex-wrap: wrap;
	position:relative;
}

.member_content {
background: #00000070;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nav_mem {
height: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}