97.- Tria (ficha)

<div class="M97" style="color: #ff7d8e;"><div class="imM97" style="background-image: url(https://i.imgur.com/16SNRLL.jpg?1);"></div><div class="boM97"><input type="radio" name="M97" id="aaM97" checked>
<input type="radio" name="M97" id="bbM97">
<input type="radio" name="M97" id="ccM97">
<div class="icM97" style="background: #ff1b3991;">
<label for="aaM97"><span class="th th-cherry-o"></span><b>Información Básica</b></label>
<label for="bbM97"><span class="th th-clover-o"></span><b>Historia</b></label>
<label for="ccM97"><span class="th th-star-o"></span><b>Extra</b></label>
</div><div class="conM97"><div class="sliM97">
<div class="peM97"><b>01</b><div class="ttM97">about
<b>Nombre Apellido</b></div><div class="infoM97"><span><b>Nombre:</b>Info Aquí</span>
<span><b>Edad:</b>Info Aquí</span>
<span><b>Nacionalidad:</b>Info Aquí</span>
<span><b>Ocupación:</b>Info Aquí</span>
<span><b>Rango:</b>Info Aquí</span>
<span><b>Grupo:</b>Info Aquí</span>
<span><b>PB:</b>Info Aquí</span></div></div><div class="peM97"><b>02</b><div class="xxM97">Powder apple pie sugar plum jelly chocolate jelly beans. Sesame snaps bear claw cotton candy chocolate cake macaroon cupcake sweet jelly-o gummi bears. Cotton candy sugar plum marshmallow marshmallow.

<i style="color: #ff7d8e;">Tart candy canes sugar plum. Cake sweet sweet dessert topping cake tootsie roll muffin powder.</i>

Jelly oat cake bonbon jelly beans sweet roll sugar plum jelly cookie. Cotton candy chocolate bar donut tart cotton candy topping cotton candy. Dessert cake carrot cake cake. Dragée topping pastry. Cookie sweet tart lollipop pastry.</div></div>
<div class="peM97"><b>03</b><div class="subM97">Like</div><div class="cgM97"><b>Gatos</b>
<b>Chocolate</b>
<b>Suéteres</b>
<b>Flores</b>
<b>Azúcar</b>
<b>Muchos Colores</b></div><div class="subM97">Dislike</div><div class="cgM97"><b>Perros</b>
<b>Orégano</b>
<b>Sudaderas</b>
<b>Césped</b>
<b>Sal</b>
<b>Oscuridad</b>
<b>Arroz con Leche</b>
<b>Espinacas</b>
<b>Zoquetes</b>
<b>Frío</b>
<b>Polvo</b>
<b>Mocos</b></div></div>
</div></div></div></div><a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="miM97">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Lato:100,400,900|Poppins:100,400,800&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><style>.M97, .M97 * {transition: .5s; box-sizing: border-box;} .M97 {width: 600px; background: #FFF; margin: auto; padding: 20px;} .imM97 {width: 250px; height: 300px; background-position: center center; clip-path: polygon(0 0, calc(33.3% - 5px) 0, calc(33.3% - 5px) 100%, calc(33.3% + 5px) 100%, calc(33.3% + 5px) 0, calc(66.6% - 5px) 0, calc(66.6% - 5px) 100%, calc(66.6% + 5px) 100%, calc(66.6% + 5px) 0, 100% 0, 100% 100%, 0 100%); display: inline-block; vertical-align: top; background-size: cover;} .boM97 {display: inline-block; vertical-align: top; width: calc(100% - 250px); height: 300px; position: relative; padding: 20px;} .icM97 {position: absolute; width: 60px; top: 50%; transform: translateY(-50%); left: -40px; padding: 10px 0;} .boM97 > br, .icM97 > br, .boM97 input, .sliM97 > br, .cgM97 br {display: none;} .icM97 label {display: inline-block; text-align: center; width: 100%; font-size: 30px; padding: 10px 0; margin: 0; position: relative; color: inherit;} .icM97 label span {color: #FFF; display: block; transform: scale(.8); opacity: .8;} #aaM97:checked ~ .icM97 label:nth-of-type(1) span, #bbM97:checked ~ .icM97 label:nth-of-type(2) span, #ccM97:checked ~ .icM97 label:nth-of-type(3) span {transform: scale(1); opacity: 1;} .icM97 label b {position: absolute; right: 0%; opacity: 0; background: #FFF; font: 10px Lato; padding: 5px 15px 5px 5px; top: 50%; transform: translateY(-50%); clip-path: polygon(calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 0% 0%); letter-spacing: -5px;} .icM97 label:hover b {right: 80%; opacity: 1; letter-spacing: normal;} .conM97 {margin-left: 10px; height: 100%; overflow: hidden;} .sliM97 {width: 300%; height: 100%; letter-spacing: -5px;} .peM97 {width: calc(100% / 3); display: inline-block; vertical-align: top; position: relative; letter-spacing: normal;} #aaM97:checked ~ .conM97 .sliM97 {margin-left: 0%;} #bbM97:checked ~ .conM97 .sliM97 {margin-left: -100%;} #ccM97:checked ~ .conM97 .sliM97 {margin-left: -200%;} .ttM97 {font: 100 25px/25px Poppins; border-bottom: 3px solid; padding: 0 0 10px 20px; -webkit-text-fill-color: #AAA;} .peM97 > b {font: 900 90px Lato; position: absolute; opacity: .2; top: -35px; left: -20px;} .infoM97 {margin: 10px; height: 180px; overflow: auto; -webkit-text-fill-color: #AAA; font: 12px Lato;} .infoM97 span {display: inline-block; width: 100%; margin: 5px 0; text-align: right; border-bottom: 1px dotted #DDD;} .infoM97 b {float: left; border-bottom: 3px solid; margin-bottom: -2px; padding: 0 3px 0 0;} .xxM97 {color: #AAA; font: 14px Lato; text-align: justify; margin: 10px; padding-right: 5px; height: 250px; overflow: auto;} .subM97 {font: 100 25px/25px Poppins; -webkit-text-fill-color: #AAA; text-align: right;} .cgM97 {max-height: 95px; margin-bottom: 20px; display: flex; flex-wrap: wrap; overflow: auto;} .cgM97 b {opacity: .8; flex-grow: 1; padding: 5px; box-shadow: inset 0 0 0 50px; -webkit-text-fill-color: #FFF; font: 12px Lato; margin: 2px; text-align: center; text-transform: uppercase; letter-spacing: 1px;} .cgM97 b:hover {opacity: 1;} .cgM97 b:nth-of-type(odd) {box-shadow: inset 0 0 0 50px #FFF6, inset 0 0 0 50px;} .cgM97 b:nth-of-type(3n) {box-shadow: inset 0 0 0 50px #FFF3, inset 0 0 0 50px;} .miM97 {font: 10px/15px Lato !important; display: block; text-align: center; transition: .5s;} .miM97:hover {letter-spacing: 5px;} .M97 div::-webkit-scrollbar {width: 3px !important; background: #0006 !important;} .M97 div::-webkit-scrollbar-thumb {background: #0006 !important;}</style>