[dohtml]<link href="https://fonts.googleapis.com/css?family=Abel|Anton|Staatliches" rel="stylesheet">
<style>

.welcomeback { background: #b61c88; background: #b61c88; background: -moz-linear-gradient(-45deg, #b24592 0%, #e81b83 50%, #f15f79 100%); background: -webkit-linear-gradient(-45deg, #b24592 0%,#e81b83 50%,#f15f79 100%); background: linear-gradient(135deg, #b24592 0%,#e81b83 50%,#f15f79 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b61c88', endColorstr='#f12b80',GradientType=1 ); position: relative; margin: 20px auto 0px; width: 500px; height: 550px; border-bottom: 50px solid black; }

.wbhide { position: relative; width: 500px; height: 600px; overflow: hidden; }

.welcomeback input { display: none; }

#wbsecond+label { position: absolute; top: 560px; right: 10px; font-size: 30px; font-family: Staatliches; text-align: right; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbeighth+label { position: absolute; top: 560px; right: 10px; font-size: 30px; font-family: Staatliches; text-align: right; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbfirst+label { position: absolute; top: 560px; left: 10px; font-size: 30px; font-family: Staatliches; text-align: left; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbfifth+label { position: absolute; top: 560px; left: 10px; font-size: 30px; font-family: Staatliches; text-align: left; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbsixth+label { position: absolute; top: 560px; left: 10px; font-size: 30px; font-family: Staatliches; text-align: left; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbthird+label { position: absolute; top: 560px; right: 10px; font-size: 30px; font-family: Staatliches; text-align: right; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbfourth+label { position: absolute; top: 560px; right: 10px; font-size: 30px; font-family: Staatliches; text-align: right; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

.welcomeback label i { font-size: 10px; font-style: normal; letter-spacing: 10px; margin-right: -10px; color: #f15f79; }

.in1 { height: 500px; width: 400px; position: absolute; top: 50px; left: -500px; outline: 1px solid black; outline-offset: 10px; overflow: hidden; transition: 0.6s; opacity: 0; z-index: 2; }

.inimg { position: absolute; background-size: cover; height: 300px; width: 300px; border-radius: 100%; border: 10px solid #e81b83; box-shadow: 0 0 0 1px black; top: 35px; left: 35px; -webkit-transition: 0.7s; transition: 0.7s; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; }

.inimg:after { height: 300px; width: 300px; position: absolute; content: ""; border-radius: 100%; background: #03157e; mix-blend-mode: hard-light; border: 1px solid black; top: -1px; left: -1px; }

.in1:hover .inimg { opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; transition-delay: 0s; -webkit-transition-delay: 0s; transform: rotate(360deg); -webkit-transform: rotate(360deg); }

.in1 name { display: block; font-family: Staatliches; color: black; font-size: 40px; letter-spacing:20px; position: absolute; bottom: 20px; width: 100%;; text-align: center; text-transform: uppercase; right: -10px; line-height: 140%; }

.winfo1, .winfo2, .winfo3, .winfo4, .winfo5, .winfo6 { padding: 10px; font-family: abel; position: absolute; letter-spacing: 1px; text-align: right; width: calc(100% - 20px); font-size: 14px; transition: 0.9s; transition-delay: 0s; opacity: 0; top: -400px; background: black; display: flex; flex-direction: row-reverse; border-radius: 10px; color: white; line-height: 100%; justify-content: space-between; }

.winfo2, .winfo4, .winfo6 { text-align: left; flex-direction: row; }

.winfo1 b, .winfo3 b, .winfo5 b { color: #f15f79; text-transform: uppercase; letter-spacing: 5px; margin-left: 10px; font-family: Staatliches; line-height:130%; }

.winfo2 b, .winfo4 b, .winfo6 b { color: #b24592; text-transform: uppercase; letter-spacing: 5px; margin-right: 10px; font-family: Staatliches; line-height:130%; }

.in1:hover .winfo1 { transition-delay: 0.2s; opacity: 1; top: 0px; }

.wbplayer .winfo1 { top: 0px; opacity: 1; }

.wbplayer .winfo2 { top: 60px; opacity: 1; }

.wbplayer .winfo3 { top: 120px; opacity: 1; }

.wbplayer .winfo1 b, .wbplayer .winfo3 b { color: #0575e6; }

.wbplayer .winfo2 b { color: #25d6c2; }

.winfo2 { top: -340px; }

.in1:hover .winfo2 { transition-delay: 0.4s; opacity: 1; top: 60px; }

.winfo3 { top: -280px; }

.in1:hover .winfo3 { transition-delay: 0.6s; opacity: 1; top: 120px; }

.winfo4 { top: -220px; }

.in1:hover .winfo4 { transition-delay: 0.8s; opacity: 1; top: 180px; }

.winfo5 { top: -160px; }

.in1:hover .winfo5 { transition-delay: 1s; opacity: 1; top: 240px; }

.winfo6 { top: -100px; }

.in1:hover .winfo6 { transition-delay: 1.2s; opacity: 1; top: 300px; }

#wbsecond:checked ~ #wbfirst+label { opacity: 1; z-index: 3; }

#wbsecond:checked ~ #wbfirst+label i { color: #25d6c2; }

#wbfirst:checked ~ #wbsecond+label { opacity: 1; z-index: 3; }

#wbfirst:checked ~ .in1 { left: 50px; opacity:1; transition-delay: 0.5s; }

#wbsecond:checked ~ #wbthird+label { opacity: 1; z-index: 3; }

#wbsecond:checked ~ #wbthird+label i { color: #25d6c2 }

.wbgradient { height: 0px; width: 0px; background: #25d6c2; background: -moz-linear-gradient(45deg, #25d6c2 0%, #0575e6 50%, #03157e 100%); background: -webkit-linear-gradient(45deg, #25d6c2 0%,#0575e6 50%,#03157e 100%); background: linear-gradient(45deg, #25d6c2 0%,#0575e6 50%,#03157e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25d6c2', endColorstr='#03157e',GradientType=1 ); position: absolute; right: -500px; top: -500px; border-radius: 100%; transition: 0.4s; transition-delay: 0s; opacity: 0; transition-delay: 0.3s; }

#wbsecond:checked ~ .wbgradient, #wbfourth:checked ~ .wbgradient2 { top: 0px; right: 0px; border-radius: 0%; opacity: 1; height: 550px; width: 500px; }

#wbthird:checked ~ .wbgradient { right: 500px; }

#wbthird:checked ~ #wbfifth+label { opacity: 1; z-index: 3; }

#wbthird:checked ~ #wbfourth+label { opacity: 1; z-index: 3; }

#wbfourth:checked ~ #wbsixth+label { opacity: 1; z-index: 3; }

#wbfourth:checked ~ #wbsixth+label i { color: #25d6c2 }

.win2 { height: 350px; width:295px; position: absolute; top: 50px; right: -550px; overflow: auto; transition: 0.6s; border: 50px solid black; background: black; opacity: 0; outline: 1px solid white; outline-offset: 10px; padding-right: 5px; color: #c7c7c7; font-family: abel; font-size: 12px; text-align: justify; line-height: 210%; letter-spacing: 0.5px; z-index: 2; transition-delay: 0s; }

.welcomeback h1 { color:#b24592; font-family: Staatliches; letter-spacing: 10px; font-size: 12px; border-bottom: 1px solid #666; }

.win2 b { background: #b24592; color: white; padding: 0px 2px; }

.welcomeback h2 { text-transform: lowercase; text-align: center; font-style: italic; letter-spacing: 2px; color: white; font-size: 13px; }

.wbfree h1 { color:#25d6c2; font-family: Staatliches; letter-spacing: 10px; font-size: 12px; border-bottom: 1px solid #666; }

.wbfree b { background: #25d6c2; color: white; padding: 0px 2px; }

.wbfree h2 { text-transform: lowercase; text-align: center; font-style: italic; letter-spacing: 2px; color: black; font-size: 13px; }

#wbthird:checked ~ .win2 { right: 50px; opacity: 1; transition-delay: 0.3s; }

#wbfourth:checked ~ .win2 { right: 550px; transition-delay: 0s; }

.wbgradient2 { height: 0px; width: 0px; background: #25d6c2; background: -moz-linear-gradient(45deg, #25d6c2 0%, #0575e6 50%, #03157e 100%); background: -webkit-linear-gradient(45deg, #25d6c2 0%,#0575e6 50%,#03157e 100%); background: linear-gradient(45deg, #25d6c2 0%,#0575e6 50%,#03157e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#25d6c2', endColorstr='#03157e',GradientType=1 ); position: absolute; right: -500px; top: -500px; border-radius: 100%; transition: 0.4s; opacity: 0; transition-delay: 0.3s; }

#wbseventh+label { position: absolute; top: 560px; left: 10px; font-size: 30px; font-family: Staatliches; text-align: left; line-height: 40%; cursor: pointer; color: white; opacity: 0; transition: 0.3s; z-index: 0; }

#wbfirst:checked ~ #wbseventh+label { opacity: 1; z-index: 3; }

#wbfirst:checked ~ .wbgradient2 { right: 500px; transition-delay: 0.3s; }

#wbfourth:checked ~ .in1 { left: 550px; transition-delay: 0s; }

#wbfourth:checked ~ #wbeighth+label { opacity: 1; z-index: 3; }

#wbfourth:checked ~ #wbeighth+label i { color: #25d6c2 }

.wbfree { height: 350px; width:295px; position: absolute; top: 50px; right: 50px; overflow: auto; transition: 0.4s; border: 50px solid white; background: white; opacity: 0; outline: 1px solid black; outline-offset: 10px; padding-right: 5px; color: #555; font-family: abel; font-size: 12px; text-align: justify; line-height: 210%; letter-spacing: 0.5px; }

#wbsecond:checked ~ .wbfree { opacity: 1; transition-delay: 0.6s; z-index: 1; }

.wbplayer { height: 500px; width: 400px; position: absolute; top: 50px; left: 50px; outline: 1px solid black; outline-offset: 10px; overflow: hidden; transition: 0.4s; opacity: 0; transition-delay: 0s; }

#wbfourth:checked ~ .wbplayer { opacity: 1; transition-delay: 0.6s; z-index: 1; }

.wbalias { font-family: Staatliches; color: white; position: absolute; width: 100%; right: -10px; text-align: center; bottom: 250px; font-size: 40px; letter-spacing: 10px; line-height: 100%; }

.wbplayerpic { position: absolute; height: 200px; width: 360px; background-size: cover; bottom: 30px; right: 20px; outline: 1px solid black; outline-offset:10px; }

.wbtriggers { position: absolute; width: 100%; right: -4px; font-size: 12px; font-family: abel; color: white; bottom: 300px; letter-spacing: 4px; text-align: center; }

.wbplayerpic:after { background: #0575e6; height: 200px; width: 360px; content:''; position: absolute; mix-blend-mode: hard-light; }

.win2::-webkit-scrollbar{width:1px} .win2::-webkit-scrollbar-track{background:transparent!important;border:none!important} .win2::-webkit-scrollbar-thumb{background: white} .wbfree::-webkit-scrollbar{width:1px} .wbfree::-webkit-scrollbar-track{background:transparent!important;border:none!important} .wbfree::-webkit-scrollbar-thumb{background: black}

</style>
<div class="welcomeback">
<div class="wbhide">
<input type="radio" id="wbfirst" name="wb" checked>
<label for="wbfirst"><<<<br><i>intro</i></label>
<input type="radio" id="wbsecond" name="wb">
<label for="wbsecond">>>><br><i>Freestyle</i></label>
<input type="radio" id="wbfirst" name="wb">
<label for="wbfirst"><<<<br><i>intro</i></label>
<input type="radio" id="wbthird" name="wb">
<label for="wbthird">>>><br><i>shipper</i></label>
<input type="radio" id="wbfifth" name="wb">
<label for="wbsecond"><<<<br><i>freestyle</i></label>
<input type="radio" id="wbfourth" name="wb">
<label for="wbfourth">>>><br><i>player</i></label>
<input type="radio" id="wbsixth" name="wb">
<label for="wbthird"><<<<br><i>shipper</i></label>
<input type="radio" id="wbseventh" name="wb">
<label for="wbfourth"><<<<br><i>player</i></label>
<input type="radio" id="wbeighth" name="wb">
<label for="wbfirst">>>><br><i>intro</i></label>

<div class="in1">
 <div class="inimg" style="background-image: url(http://placehold.it.400x400)"></div>
<name>FIRST<br>LASt</name>
 <div class="winfo1"><b>HERE</b> HERE</div>
 <div class="winfo2"><b>HERE</b> HERE</div>
 <div class="winfo3"><b>HERE</b> HERE</div>
 <div class="winfo4"><b>HERE</b> HERE</div>
 <div class="winfo5"><b>HERE</b> HERE</div>
 <div class="winfo6"><b>HERE</b> HERE</div>
</div>
 
 <div class="wbgradient"></div>
 <div class="wbfree">
     This is where the FREESTYLE goes!
   <h1>this is a title</h1>
   <h2>this is a different title</h2>
     </p>
   </p>
 </div>
 
 <div class="win2">
   This is where the SHIPPER goes!
   <h1>this is a title</h1>
   <h2>this is a different title</h2>
     </p>
   </p>
 </div>
 
 <div class="wbgradient2"></div>
 <div class="wbplayer">
   <div class="winfo1"><b>player age</b> HERE</div>
 <div class="winfo2"><b>time zone</b> HERE</div>
 <div class="winfo3"><b>contact</b> HERE</div>
 <div class="wbtriggers"><<< ( triggers: HERE ) >>></div>
 <div class="wbalias">monty</div>
 <div class="wbplayerpic" style="background-image: url(http://placehold.it/200x360)"></div>
 </div>
</div>
</div><center><a href="http://cttw.jcink.net/index.php?showuser=18033" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/dohtml]