Ancestral (información / multi)

<div class="MM039" style="background-image: url(https://pm1.narvii.com/7190/62428aeaf4d8eb64d88ad36791b8d1efac35b4d0r1-750-1125v2_hq.jpg)"><label><input type="checkbox"><div>

<span class="th th-sugar-cane"></span>
<b>Ancestral</b>
<div class="MM039-txt">Powder lollipop lollipop jelly-o lollipop biscuit dessert. Dragée pastry cotton candy chocolate jelly beans chocolate wafer cake bear claw. Pudding liquorice ice cream.

Powder gummi bears soufflé pie. Gingerbread soufflé soufflé powder sesame snaps chupa chups. Candy canes donut pastry gingerbread candy canes fruitcake bonbon jujubes chocolate bar.</div>

<a></a>

<div class="MM039-hi"><div>
<div class="MM039-img" style="background-image: url(https://pm1.narvii.com/7190/62428aeaf4d8eb64d88ad36791b8d1efac35b4d0r1-750-1125v2_hq.jpg)"></div>
<div class="MM039-x">Candy canes liquorice sweet chocolate sugar plum topping. Candy canes pie candy canes. Gummi bears carrot cake danish.

Jelly-o sweet macaroon sugar plum cake toffee pudding wafer chocolate bar. Marshmallow tart chupa chups pie apple pie soufflé. Sweet fruitcake chupa chups jujubes jelly-o jelly beans.

Chupa chups donut powder candy. Soufflé chocolate tiramisu carrot cake chocolate. Liquorice topping sweet roll gummies oat cake topping carrot cake icing.

Cake tootsie roll lollipop wafer brownie. Wafer tiramisu jelly dessert. Sweet chocolate bar fruitcake carrot cake. Sweet marzipan powder chupa chups.

Donut chupa chups pudding toffee oat cake icing tootsie roll fruitcake. Carrot cake dragée danish macaroon biscuit gingerbread candy pudding jujubes. Sweet carrot cake apple pie bonbon croissant gummies.</div>
</div></div>

</div></label></div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"><style>.MM039, .MM039 * { box-sizing: border-box; scrollbar-color: var(--mm-04) #0002 !important; scrollbar-width: thin; transition: .5s; } @font-face { font-family: Ailerons; src: url(https://dl.dropbox.com/s/okwi28hfh8zb1xw/Ailerons.otf); } .MM039 input, .MM039 br { display: none; } .MM039 { --mm-01: #1b252e; --mm-02: #c7c8d4; --mm-03: #33443c; --mm-04: #4b6f5e; width: 540px; margin: auto; padding: 20px; background-size: cover; background-position: center; min-height: 300px; border: 1px solid var(--mm-03); } .MM039 label { margin: 0; padding: 0; } .MM039 > label > div { min-height: 300px; background: var(--mm-01); padding: 20px; text-align: center; color: var(--mm-02); margin-left: 307px; border: 1px solid var(--mm-03); display: flex; flex-direction: column; font: 12px Lato; position: relative; } .MM039 > label > div > span { font-size: 26px; color: var(--mm-04); margin: 20px 0 0; } .MM039 > label > div > b { font: 20px Ailerons; margin: 10px; letter-spacing: -3px; } .MM039 > label > div > b::after { content: ""; width: 50px; border-top: 2px solid var(--mm-04); display: block; margin: 10px auto 0; } .MM039 > label > div > a { margin: 15px auto; background: var(--mm-03); color: var(--mm-02); font: bold 10px Lato; text-transform: uppercase; letter-spacing: 10px; padding: 5px 5px 5px 15px; cursor: pointer; } .MM039 > label > div > a:hover { background: var(--mm-04); } .MM039 > label > div > a::before { content: "Más"; } .MM039 > label > input:checked ~ div > a::before { content: "Menos"; } .MM039 > label > input:checked ~ div { margin: 0 307px 0 0; } .MM039-hi { position: absolute; top: -1px; bottom: -1px; left: calc(100% + 7px); width: 0px; overflow: hidden; } .MM039-hi > div { background: var(--mm-01); border: 1px solid var(--mm-03); width: 300px; height: 100%; } .MM039 > label > input:checked ~ div .MM039-hi { width: 300px; } .MM039-txt { font-size: 10px; letter-spacing: 1px; } .MM039-hi > div { background: var(--mm-01); border: 1px solid var(--mm-03); width: 300px; height: 100%; display: flex; flex-direction: column; padding: 20px; } .MM039-img { height: 120px; border: 1px solid var(--mm-04); padding: 5px; background-position: center; background-size: cover; background-clip: content-box; } .MM039-x { margin: 10px; flex: 1; text-align: justify; overflow: auto; } .MM039-x br, .MM039-txt br { display: block; } .MM039-x br + br, .MM039-txt br + br { margin: 5px; } .MM039 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM039 div::-webkit-scrollbar-thumb { background: var(--mm-04) !important; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>