.section_artwork_details{
  position: relative;
  padding: 3vw 0;

  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title_artwork_details h3{
  position: relative;
  text-align: center;
  color: white;
  text-shadow: 3px 3px 2px black;
  font-size: calc(1.8em + 1.8vw);
  font-weight: 200;
  margin: 0 0 3vw 0;
  padding: 0px;
}
.section_my_lanyards p{
  position: relative;
  text-align: left;
  color: white;
}

.back_to_my_lanyards{
  position: absolute;
  top: 30px;
  left: 30px;
  height: 30px;
  width: 30px;
}
.back_to_my_lanyards img{
  position: relative;
  height: 100%;
  width: 100%;
  filter: drop-shadow(1px 1px 3px black);
  transition: all .4s;
  cursor: pointer;
}
.back_to_my_lanyards img:hover{
  filter: drop-shadow(2px 2px 4px black);
}
.back_to_my_lanyards img:active{
  filter: drop-shadow(1px 1px 3px black);
}
.groupBox_artwork_details{
  position: relative;
  width: 20vw;
  height: 22.5cm ;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);

  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.my_lanyards_left_side{
  position: relative;
  height: 21.6cm ;
  width: 0.48cm;
  background: orange;
  margin: 20px 0;
}

.my_lanyards_right_side{
  position: relative;
  height: 21.6cm ;
  width: 0.48cm;
  background: green;
  margin: 20px 0;
}







.printable_area_text_lanyard_left{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 18.24cm;
  width: 0.288cm;
  overflow: scroll;
/*  background: rgba(0, 0, 0, .2);*/
}
.printable_area_text_lanyard_right{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 18.24cm;
  width: 0.288cm;
  overflow: scroll;

/*  background: rgba(0, 0, 0, .2);*/
}





.printable_area_img_lanyard_left{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 18.24cm;
  width: 0.288cm;
  overflow: scroll;
}
.printable_area_img_lanyard_right{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 18.24cm;
  width: 0.288cm;
  overflow: scroll;
}
























.text_lanyard_left {
  position: absolute;
  top: -50%;
  left: 0px;
  height: 200%;
  width: 100%;

  display: flex;
  flex-direction: column-reverse;
  gap: 20px; /* espacio entre textos rotados */
  align-items: flex-start; /* <== centrado horizontal */
  justify-content: flex-end; /* opcional: centrado vertical */

  transform: rotate(0deg);
  overflow: hidden;

}
.text_lanyard_right {
  position: absolute;
  top: -50%;
  left: 0px;
  height: 200%;
  width: 100%;

  display: flex;
  flex-direction: column-reverse;

  gap: 20px; /* espacio entre textos rotados */
  align-items: flex-start; /* <== centrado horizontal */
  justify-content: flex-end; /* opcional: centrado vertical */
  transform: rotate(180deg);
  overflow: hidden;


}
/* Sin rotación (0 grados) */


.wrap_text_0{
  position: relative;
  display: inline-block; /* Se ajusta al tamaño del contenido */
  transform-origin: top left;
}

.wrap_text_0 h1 {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 6px;
  font-weight: 300;
  white-space: nowrap;
  transform: rotate(0deg) ;

}

.wrap_text_1{
  position: relative;
  display: inline-block; /* Se ajusta al tamaño del contenido */
  transform-origin: top left;
}


.wrap_text_1 h1 {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 6px;
  font-weight: 300;
  white-space: nowrap;
  transform: rotate(180deg) scale(-1, -1);;
}




.wrap_img_0 img{
  width: 10px;
  transform: rotate(30deg) ;
}

.wrap_img_1 img{
  width: 10px;
  transform: rotate(180deg) scale(-1, -1);
}
.padding_text_top{
  position: absolute;
  top: 0px;
  width: 100%;
  background-color: red;
  z-index: 2;
}
.padding_text_bottom{
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: red;
  z-index: 2;
}

/*
.rotate-0 {
  transform: none;
}
.rotate--90 {
  transform: rotate(90deg) translateX(50%);
}

.rotate-90 {
  transform: rotate(90deg)  translate(0%, -135%);
  transform-origin: top left;
}

.rotate-180 {
  transform: rotate(180deg) translate(-100%, -100%);
  transform-origin: top left;
}*/





.img_lanyard_left {
  position: absolute;
  top: -50%;
  left: 0px;
  display: flex;
  flex-direction: column-reverse;
  gap: 20px; /* espacio entre textos rotados */
  align-items: flex-start; /* <== centrado horizontal */
  justify-content: flex-end; /* opcional: centrado vertical */
  height: 200%;
  width: 100%;
  transform: rotate(0deg);
  overflow: hidden;
}

.img_lanyard_right {
  position: absolute;
  top: -50%;
  left: 0px;
  display: flex;
  flex-direction: column-reverse;
  gap: 20px; /* espacio entre textos rotados */
  align-items: flex-start; /* <== centrado horizontal */
  justify-content: flex-end; /* opcional: centrado vertical */
  height: 200%;
  width: 100%;

  transform: rotate(180deg);
  overflow: hidden;


}

.wrap_img_0{
  position: relative;
  display: block; /* Se ajusta al tamaño del contenido */
  transform-origin: top left;
  width: 10px;
  height: 10px;
}
.wrap_img_1{
  position: relative;
  display: block; /* Se ajusta al tamaño del contenido */
  transform-origin: top left;
  width: 10px;
  height: 10px;
}
.wrap_img_0 img {
  position: absolute;
  top: 50%;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  transform: rotate(0deg)  translateY(-50%);
}

.wrap_img_1 img {
  position: absolute;
  top: 50%;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  transform: rotate(180deg) scale(-1, -1) translateY(-50%);
}

.padding_image_top{
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 2;
}
.padding_image_bottom{
  position: absolute;
  bottom: 0px;
  width: 100%;
  z-index: 2;
}

















/**/