<div class="MG6" style="background-image: linear-gradient(to right, #222 170px, #EEE 170px), url(https://via.placeholder.com/564C);"><div class="inMG6">

<input type="radio" name="MG6" id="MG601" checked><label for="MG601"><span class="sf sf-save-o"></span>Roles</label><div class="txtMG6"><span class="sf sf-save-o"></span><b>Roles</b><div>¡La foto de detrás es de 564x564!</div>
</div>

<input type="radio" name="MG6" id="MG602"><label for="MG602"><span class="sf sf-twitter"></span>Twitter</label><div class="txtMG6"><span class="sf sf-twitter"></span><b>Tweets</b><div>twets</div></div>

<input type="radio" name="MG6" id="MG603"><label for="MG603"><span class="sf sf-instagram"></span>Instagram</label><div class="txtMG6"><span class="sf sf-instagram"></span><b>Instagram</b><div>fotoos</div></div>

<input type="radio" name="MG6" id="MG604"><label for="MG604"><span class="sf sf-chat-bubbles-o"></span>Chats</label><div class="txtMG6"><span class="sf sf-chat-bubbles-o"></span><b>Chats</b><div>eee</div></div>

<input type="radio" name="MG6" id="MG605"><label for="MG605"><span class="sf sf-music-note"></span>Música</label><div class="txtMG6"><span class="sf sf-music-note"></span><b>Título Aquí</b><div>xxx</div></div>

<input type="radio" name="MG6" id="MG606"><label for="MG606"><span class="sf sf-picture-o"></span>Varios</label><div class="txtMG6"><span class="sf sf-picture-o"></span><b>Varios</b><div>de to un poco jeje</div></div>

</div></div><a class="miMG6" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a>

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><style>.MG6, .MG6 * {box-sizing: border-box; scrollbar-color: #ee6c94 #87d2bd; scrollbar-width: thin;} .inMG6 > br {display: none;} .MG6 {width: 500px; margin: auto; padding: 30px; border-radius: 30px; font: 12px Montserrat; color: #555; background-blend-mode: multiply; border: 3px solid #222; text-align: center;} .MG6 input {display: none;} .inMG6 {position: relative; border-radius: 20px; overflow: hidden;} .inMG6 > label {display: block; color: #FFF9; width: 100px; padding: 22px 5px 15px; background: #87d2bd; position: relative; z-index: 5; cursor: pointer; height: 88px;} .inMG6 > label:nth-of-type(odd) {background: #ee6c94;} .inMG6 > label span {display: block; font-size: 30px;} .txtMG6 {position: absolute; top: 0; bottom: 0; right: 0; left: 100px; background: #FFF; border: 3px solid #ee6c94; border-radius: 0 21px 21px 0; display: none; overflow: hidden;} .inMG6 input:checked + label {width: 123px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); color: #FFF; padding-right: 28px;} .inMG6 input:checked + label + div {display: block;} .txtMG6 > span {display: block; font-size: 100px; margin: 30px 0 -50px; -webkit-text-stroke: 3px #ee6c9499; color: #FFF;} .txtMG6:nth-of-type(even) > span {-webkit-text-stroke: 3px #87d2bd99;} .txtMG6:nth-of-type(even) {border: 3px solid #87d2bd;} .txtMG6 > b {display: block; text-transform: uppercase; letter-spacing: 2px; color: #111; font-size: 14px; text-shadow: 2px 2px 2px #FFF, 2px -2px 2px #FFF, -2px 2px 2px #FFF, -2px -2px 2px #FFF;} .txtMG6 > div {margin: 65px 35px; text-align: justify; hyphens: auto; height: calc(100% - 203px); overflow: auto; padding: 0 5px;} .txtMG6 > div b {color: #ee6c94;} .txtMG6:nth-of-type(even) > div b {color: #87d2bd;} .miMG6 {display: block; font: 10px arial; letter-spacing: 2px; text-align: center; transition: .5s;} .miMG6:hover {letter-spacing: 10px;} .MG6 div::-webkit-scrollbar {width: 5px !important; height: 5px !important; background: #ee6c94 !important;} .MG6 div::-webkit-scrollbar-thumb {background: #87d2bd !important;} .MG6 label:first-of-type {border-radius: 30px 0 0 0;} .MG6 label:last-of-type {border-radius: 0 0 0 30px;}</style>