relas

.MB6,
.MB6 * {
  box-sizing: border-box;
  transition-duration: 0.5s;
}
.MB6 {
  width: 520px;
  margin: auto;
  background: url(https://i.postimg.cc/4XVhkNZj/concrete-fondo.jpg) #111;
  font: 10px Merriweather;
  color: #999;
  position: relative;
  min-height: 500px;
  padding-bottom: 1px;
}
.imMB6 {
  width: 100%;
  -webkit-mask-image: url(https://i.postimg.cc/0xTcSG1p/3d104fec3910d2d55903003f999bc573o.png);
  -webkit-mask-position: left bottom;
}
.ttMB6 {
  padding: 20px 0 5px;
  font: 30px IM Fell English SC;
  color: #c3aa3e;
  text-shadow: 1px 1px 2px #000;
  position: relative;
  margin: -170px 50px 0;
  text-align: right;
}
.ddMB6 {
  position: relative;
  margin: 0 40px 0 -10px;
  text-align: right;
}
.ddMB6 > br,
.reMB6 > br {
  display: none;
}
.ddMB6 > span {
  box-shadow: inset 0 0 20px;
  display: inline-block;
  padding: 5px;
  border-radius: 50%;
  position: relative;
  margin-left: 20px;
  transform: scale(0.7);
}
.ddMB6 > span:hover {
  transform: scale(1);
}
.ddMB6 > span > span {
  box-shadow: inset 0 0 100px;
  -webkit-text-fill-color: #fff;
  font-size: 17px;
  padding: 10px;
  border-radius: 50%;
  text-shadow: 1px 1px 2px #000;
}
.ddMB6 > span b {
  position: absolute;
  background: #111;
  padding: 5px;
  text-align: center;
  top: 10%;
  left: 50%;
  transform: translate(-50%) scale(0);
  font-weight: normal;
  color: #999;
  letter-spacing: 1px;
}
.ddMB6 > span:hover b {
  transform: translate(-50%) scale(1);
  top: 100%;
}
.ddMB6 > span b::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  top: -5px;
  background: #111;
  left: calc(50% - 5px);
}
.ddMB6::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: 3px;
  box-shadow: inset 0 0 5px;
  top: calc(50% - 1.5px);
  right: 10px;
}
.xxMB6 {
  padding: 30px 50px;
}
.nnMB6 {
  width: 240px;
  text-align: center;
  padding: 50px 0;
  font: 15px/15px IM Fell English SC;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 6px 15px 5px -9px #000, inset 0 0 100px #000;
  float: left;
  margin: -50px 10px 10px -50px;
}
.nnMB6 b {
  display: block;
  font-size: 20px;
}

.frMB6 {
  padding: 10px 0;
  margin: 0 0px;
  position: relative;
}
.reMB6 {
  height: 0px;
  overflow: hidden;
}
.frMB6:hover .reMB6 {
  height: 500px;
  overflow: auto;
  padding: 20px 0 0;
}
.frMB6::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 25px;
  top: 0;
  left: calc(50% - 20px);
  background-image: url(https://i.postimg.cc/KYhxPRPP/ezgif-4-4382e67596ab.png);
  background-size: 100% 100%;
  transition: 0.5s;
}
.frMB6:hover::before {
  transform: rotateX(180deg);
}

.reMB6 > div {
  position: relative;
  min-height: 250px;
}
.reMB6 > div:nth-of-type(odd) {
  padding: 50px 200px 0 150px;
}
.reMB6 > div:nth-of-type(even) {
  padding: 50px 150px 0 200px;
}
.reMB6 > div > div {
  width: 300px;
  height: 270px;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url(https://i.postimg.cc/mgL2JczT/Manchon-130.png);
  -webkit-mask-position: left bottom;
  -webkit-mask-size: 350px;
  position: absolute;
  top: 0;
}

.reMB6 > div:nth-of-type(odd) > div {
  right: 0;
}
.reMB6 > div:nth-of-type(2n) > div {
  left: 0;
  -webkit-mask-image: url(https://i.postimg.cc/Njdfcgmm/Manchon-854.png);
  -webkit-mask-position: right top;
  -webkit-mask-size: 700px;
}

.reMB6 strong {
  padding: 20px 0;
  font: 20px IM Fell English SC;
  text-shadow: 1px 1px 2px #000;
  color: #fff;
  position: relative;
  margin-bottom: 20px;
  display: block;
}
.reMB6 strong::after {
  content: "";
  width: 50px;
  border-top: 2px solid;
  position: absolute;
  bottom: 0;
  left: 0;
}
.reMB6 > div:nth-of-type(even) strong,
.reMB6 > div:nth-of-type(even) > span {
  text-align: right;
}
.reMB6 > div:nth-of-type(even) strong::after {
  left: calc(100% - 50px);
}
.reMB6 > div > span {
  background: #1119;
  display: block;
  position: relative;
  padding: 10px;
  margin: -10px;
  max-height: 90px;
  overflow: auto;
}
.miMB6 {
  display: block;
  text-align: right;
  color: #c3aa3e !important;
  text-shadow: 1px 1px 2px #000;
  font: 15px IM Fell English SC;
  margin: 20px -10px -7px;
  transition: 0.5s;
  letter-spacing: 5px;
}
.miMB6:hover {
  letter-spacing: 7px;
}

.MB6 div::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: #FFF6 !important;
}
.MB6 div::-webkit-scrollbar-thumb {
  background: #FFF6 !important;
}