A6.- Very Important Things (inventario)

<div class="MA7"><div class="ttMA7"><b>Nombre Apellido</b>
<span>inventario</span></div><div class="imMA7" style="background-image: url(https://i.imgur.com/5xxpWhA.jpg?1);"><div class="inMA7">
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/TFN6mxn.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/cpUDsSo.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/FmomdPA.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/tnWjcXt.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/JMYSBVp.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/JCcBSED.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/qfDlVQW.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/UEWWbac.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/qLBcu65.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/f1nBMrz.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/mtfda5I.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/exzCCSy.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/pKk0WlR.gif"></div>
<div style="background: #568094;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/z74CVgs.gif"></div>
<div style="background: #71a7c2;"><span><b>Ítem</b><i>Cantidad, descripción, cosas varias.</i></span>
<img src="https://i.imgur.com/BVCwEFr.gif"></div>
</div></div><a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="miMA7">Emme's Codes</a></div>

<style>.MA7, .MA7 * {box-sizing: border-box;} @font-face {font-family: 'Sketch Icons'; src: url('https://cdn.rawgit.com/EmmesCodes/Tipografias/9e530976/SketchIconsbold.ttf');} @font-face {font-family: 'AceSans'; src: url('https://cdn.rawgit.com/EmmesCodes/Tipografias/9e530976/AceSans-Demo.otf');} .MA7 {width: 402px; border: 1px solid transparent; margin: auto; background: #FFF padding-box; color: #333; overflow: hidden;} .ttMA7 {background: #0b2339; padding: 30px; position: relative; text-align: center; color: #FFF; font: 10px arial; letter-spacing: 5px; z-index: 3;} .ttMA7 b {font: 20px AceSans; letter-spacing: normal;} .ttMA7::after {content: ""; position: absolute; border-top: 20px solid #0b2339; width: 30px; border-left: 15px solid transparent; border-right: 15px solid transparent; bottom: -20px; left: 35px; box-sizing: border-box;} .imMA7 {height: 500px; background-position: center; position: relative; transition: .5s;} .MA7:hover .imMA7 {margin-right: 300px;} .inMA7 {width: 700px; height: 100%; position: absolute; left: 100%; top: 0; overflow: auto; transition: 1s; letter-spacing: -5px;} .MA7:hover .inMA7 {width: 300px;} .inMA7 > br {display: none;} .inMA7 > div {background: #3333; width: calc(100% / 3 - 100px); display: inline-block; vertical-align: top; height: 120px; margin-left: 100px; transition: 1s; box-shadow: inset 0 0 0 100px #0b233900; position: relative; overflow: hidden; letter-spacing: normal;} .MA7:hover .inMA7 > div {width: calc(100% / 3); margin-left: 0px;} .inMA7 > div:hover {transition: .5s; box-shadow: inset 0 0 0 100px #0b233966;} .inMA7 > div span {background: #fffc; position: absolute; text-align: center; padding: 5px; font: 10px Arial; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 50% 100%, 0 calc(100% - 15px)); width: 100%; transition: .5s; height: calc(100% + 15px); left: 0; bottom: calc(100% - 25px); z-index: 5;} .inMA7 > div span:hover {bottom: -15px;} .inMA7 > div span b {display: block; text-transform: uppercase; letter-spacing: 1px; position: absolute; bottom: 10px; width: 100%; left: 0; transition: .5s;} .inMA7 > div span:hover b {bottom: 20px;} .inMA7 > div span i {display: block; margin: 5px; height: 85px; overflow: auto;} .inMA7 > div img {max-width: 60px; max-height: 80px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: flota .7s infinite alternate; animation-play-state: paused; transition: .5s;} .inMA7 > div:hover img {animation-play-state: running; max-width: 80px; max-height: 100px;} @keyframes flota {from {margin-top: 10px;} to {margin-top: 0px;}} .miMA7 {display: block; text-align: center; color: #FFF !important; background: #0b2339; font: 10px Arial; transition: .5s;} .miMA7:hover {letter-spacing: 3px;} .MA7 div::-webkit-scrollbar {width: 3px !important; background: #0006 !important;} .MA7 div::-webkit-scrollbar-thumb {background: #0006 !important;}</style>