<!--HTML--><link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<center>
 <div id="swim">
   <div class="swimtitle">
     <div class="swimtitlef">Название вашего эпизода
</div></div>
         <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="swimp2" style="background-image:url(http://placehold.it/240x165)"></div></a>
   <div class="swimtag">
     <div class="swimtagg" style="top: 37px">время</div>
     <div class="swimtagg" style="top: 70px">место</div>
     <div class="swimtagg" style="top: 103px">участники</div>
   </div>

   <div class="swimp1" style="background-image: url(http://placehold.it/480x165)">
   </div>
   <div class="swimpost">ваше описание любого размера

</div>
 </div>
</center>

<style>
@keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-webkit-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-moz-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

#swim {
 height: 330px;
 width: 480px;
 position: relative;
 border: 10px solid #fff;
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 overflow: hidden
}

.swimtitle {
 height: 165px;
 width: 480px;
 position: absolute;
 background-color: #1f2a1f;
}

.swimtitlef {
 height: 165px;
 width: 480px;
 line-height: 165px;
 position: absolute;
 color: #fff;
 font-family: 'cuprum';
 text-transform: uppercase;
 font-size: 13px;
 letter-spacing: 2px;
 -moz-animation: hell 3s infinite ease-in-out;
 -webkit-animation: hell 3s infinite ease-in-out;
 animation: hell 3s infinite ease-in-out;
}

.swimp1 {
 height: 165px;
 width: 480px;
 position: absolute;
 top: 165px;
 background-color: #844e41;
 background-blend-mode: multiply;
 z-index: 2
}

.swimp2 {
 height: 165px;
 width: 240px;
 background-color: #c58778;
 background-blend-mode: multiply;
 position: absolute
}

.swimtag {
 height: 165px;
 width: 240px;
 position: absolute;
 left: 240px;
 background-color: transparent
}

.swimtagg {
 height: 20px;
 width: 186px;
 line-height: 20px;
 font-family: cuprum;
 text-transform: uppercase;
 position: absolute;
 left: 25px;
 color: #fff;
 letter-spacing: 2px;
 border: 2px solid #fff;
 font-size: 9px
}

.swimtagg::first-letter {
 color: #ff5959
}

.swimpost {
 height: 145px;
 width: 460px;
 padding: 5px;
 border: 5px solid #fff;
 position: absolute;
 top: 165px;
 background-color: #fff;
 text-align: justify;
 font-family: cuprum;
 font-size: 11px;
 column-count: 3;
 -moz-column-count: 3;
 -webkit-column-count: 3;
 column-gap: 15px;
 -moz-column-gap: 15px;
 -webkit-column-gap: 15px;
 overflow: auto;
 line-height: 12px
}

.swimpost b {
 font-size: 12px;
 font-weight: 700;
 font-style: italic;
 color: #805c73;
 letter-spacing: -1px
}

.swimpost::-webkit-scrollbar {
 height: 2px
}

.swimpost::-webkit-scrollbar-thumb {
 background-color: #805c73
}

#swim .swimtitlef {
 transform: scale(1);
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
 -webkit-transition-delay: 0.7s
}

#swim:hover .swimtitlef {
 transform: scale(0);
 opacity: 0;
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}

#swim .swimtitle {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimtitle {
 left: 240px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimp2 {
 left: -240px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimp2 {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimtag {
 top: -240px;
 -webkit-transition: linear 0.6s;
 -moz-transition: linear 0.6s;
 transition: linear 0.6s;
}

#swim:hover .swimtag {
 top: 0px;
 -webkit-transition-delay: 1.2s
}

#swim .swimp1 {
 left: 0px;
 -webkit-transition: 1s linear
}

#swim:hover .swimp1 {
 left: -480px;
 -webkit-transition: 1s linear
}
</style>

<!--HTML--><link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<center>
 <div id="swim">
   <div class="swimtitle">
     <div class="swimtitlef">Название вашего эпизода
</div></div>
         <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=13908"><div class="swimp2" style="background-image:url(http://funkyimg.com/i/22cMC.gif)"></div></a>
   <div class="swimtag">
     <div class="swimtagg" style="top: 37px">время</div>
     <div class="swimtagg" style="top: 70px">место</div>
     <div class="swimtagg" style="top: 103px">участники</div>
   </div>

   <div class="swimp1" style="background-image: url(http://funkyimg.com/i/22cwq.png)">
   </div>
   <div class="swimpost">ваше описание любого размера

</div>
 </div>
</center>

<style>
@keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-webkit-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-moz-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

#swim {
 height: 330px;
 width: 480px;
 position: relative;
 border: 10px solid #fff;
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 overflow: hidden
}

.swimtitle {
 height: 165px;
 width: 480px;
 position: absolute;
 background-color: #1f2a1f;
}

.swimtitlef {
 height: 165px;
 width: 480px;
 line-height: 165px;
 position: absolute;
 color: #fff;
 font-family: 'cuprum';
 text-transform: uppercase;
 font-size: 13px;
 letter-spacing: 2px;
 -moz-animation: hell 3s infinite ease-in-out;
 -webkit-animation: hell 3s infinite ease-in-out;
 animation: hell 3s infinite ease-in-out;
}

.swimp1 {
 height: 165px;
 width: 480px;
 position: absolute;
 top: 165px;
 background-color: #844e41;
 background-blend-mode: multiply;
 z-index: 2
}

.swimp2 {
 height: 165px;
 width: 240px;
 background-color: #c58778;
 background-blend-mode: multiply;
 position: absolute
}

.swimtag {
 height: 165px;
 width: 240px;
 position: absolute;
 left: 240px;
 background-color: transparent
}

.swimtagg {
 height: 20px;
 width: 186px;
 line-height: 20px;
 font-family: cuprum;
 text-transform: uppercase;
 position: absolute;
 left: 25px;
 color: #fff;
 letter-spacing: 2px;
 border: 2px solid #fff;
 font-size: 9px
}

.swimtagg::first-letter {
 color: #ff5959
}

.swimpost {
 height: 145px;
 width: 460px;
 padding: 5px;
 border: 5px solid #fff;
 position: absolute;
 top: 165px;
 background-color: #fff;
 text-align: justify;
 font-family: cuprum;
 font-size: 11px;
 column-count: 3;
 -moz-column-count: 3;
 -webkit-column-count: 3;
 column-gap: 15px;
 -moz-column-gap: 15px;
 -webkit-column-gap: 15px;
 overflow: auto;
 line-height: 12px
}

.swimpost b {
 font-size: 12px;
 font-weight: 700;
 font-style: italic;
 color: #805c73;
 letter-spacing: -1px
}

.swimpost::-webkit-scrollbar {
 height: 2px
}

.swimpost::-webkit-scrollbar-thumb {
 background-color: #805c73
}

#swim .swimtitlef {
 transform: scale(1);
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
 -webkit-transition-delay: 0.7s
}

#swim:hover .swimtitlef {
 transform: scale(0);
 opacity: 0;
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}

#swim .swimtitle {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimtitle {
 left: 240px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimp2 {
 left: -240px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimp2 {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimtag {
 top: -240px;
 -webkit-transition: linear 0.6s;
 -moz-transition: linear 0.6s;
 transition: linear 0.6s;
}

#swim:hover .swimtag {
 top: 0px;
 -webkit-transition-delay: 1.2s
}

#swim .swimp1 {
 left: 0px;
 -webkit-transition: 1s linear
}

#swim:hover .swimp1 {
 left: -480px;
 -webkit-transition: 1s linear
}
</style>

<!--HTML--> <style type="text/css"> /* MINI PROFILE BY DARREN CRISS AKA BECKY */
.minipoop { width: 200px; height: 300px; position: relative; overflow: hidden; margin: auto;}
.minipoop img { width: 200px; height: 300px; position: absolute; top: 0px; left: 0px; }
.minipoop .miniscreen { width: 200px; height: 300px; background-color: rgba(250,250,250,0.9); position: absolute; top: 0px; left: 0px; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; }
.minipoop  .animatedii { position: absolute; top: 95px; left: 45px; width: 100px; height: 100px; padding: 5px; border-radius: 100%; border: 3px double #8bc1e4; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; } 
@-webkit-keyframes pulseii { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } 
@keyframes pulseii { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pulseii { -webkit-animation-name: pulseii; animation-name: pulseii; }
.minipoop .minigif { position: absolute; top: 103px; left: 53px; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; }
.minigif img { width: 100px; height: 100px; border-radius: 100%; }
.minipoop:hover .miniscreen { opacity: 0;  transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; }
.minipoop:hover .minigif, .minipoop:hover .animatedii { top: -200px;  transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; }
.minipoop .minitop { width: 120px; height: 220px; padding: 20px; background-color: #fff; position: absolute; top: -300px; left: 20px;   box-shadow: 3px 3px 3px #f0f0f0; transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out;  }
.minipoop:hover .minitop { transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; top: 20px; }
.minign { padding: 10px; width: 100px; background-color: #8bc1e4; font-family: cuprum, sans-serif; font-size: 13px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; margin-bottom: 10px; }
.mininame { width: 180px; padding: 10px; background-color: #8bc1e4; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; margin: auto; }
.mininame a { font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; }
.miniage { font-size: 60px; font-weight: 700; text-transform: uppercase; color: #8bc1e4; text-align: center; line-height: 100%; font-family: 'Roboto Condensed', sans-serif; }
.miniage2 { letter-spacing: 2px; padding: 5px; width: 110px; background-color: #8bc1e4; font-family: 'cuprum'; font-size: 9px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 400; margin-bottom: 10px;}


</style>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'><div class="minipoop"><img src="http://funkyimg.com/i/22Peh.png"><div class="miniscreen"></div> <div id="animatedii-example" class="animatedii pulseii"></div><div class="minigif"><img src="http://funkyimg.com/i/22Pee.gif"/></div><div class="minitop"><div class="minign"> Fame & Self-perfection </div><div class="miniage"> 1 </div><div class="miniage2"> баллы </div></div></div><div class="mininame"> <!-- |name| --> </div>

<!--HTML--> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type='text/css'>

.baddream {
   width: 350px;
   height: 400px;
   background-color: #ea3535;
   margin: 0 auto;
   padding: 5px 5px 12px 5px;
}

.openroad {
   width: 340px;
   height: 50px;
   font-family: 'arial' sans-serif; 
   font-weight: bold;
   font-size: 55px;
   text-transform: lowercase; 
   color: #ffffff; 
   letter-spacing: -5px; 
   line-height: 100%;
   padding: 1px 3px 2px 4px;
}

.topdown {
   width: 340px;
   height: 15px;
   font-family: 'arial' sans-serif;
   font-weight: 400;
   font-size: 9px;
   text-align: justify;
   text-transform: uppercase; 
   color: #ffffff; 
   letter-spacing: 1px; 
   line-height: 100%;
   padding: 0px 3px 0px 20px;
}


.loveiknow {
   margin: 0 auto;
   font-size: 14px;
   position: relative;
   top: 170px;
}

a.wow:link {
  color:#ea3535;
  text-decoration: none;
}

a.wow:visited {
  color:#ea3535;
}
a.wow:hover {
  color:#b84041;
}

.stabs { 
   position: relative;   
   width: 250px; 
   height: 240px; 
   clear: both;
   top: 23px;
}

.stab { 
   float: left; 
} 








.stab label { 
   display: block; 
   background-color: #ffffff;
   width: 18px;
   height: 18px;
   padding: 6px 5px 5px 6px;
   margin-top: 5px;
   margin-left: 13px; 
   text-align: center; 
   line-height: 100%; 
   letter-spacing: 0px; 
   color: #000000; 
   background-color: #ffffff;
   position: relative;
   left: 60px;
   top: -5px; 
   font-size: 15px;
}
.stabs .stab [type=radio] { 
   display: none; 
} 
.stabs .stab [type=radio]:checked ~ label { 
   background: #ffffff;
   color: #ea3535;
   z-index: 1; 
}
.stabs .stab [type=radio]:checked ~ label ~ .content {
   z-index: 4; 
   -webkit-transform: scale(1);
   -o-transform: scale(1); 
   -moz-transform: scale(1);
}
.content {
   position: absolute;
   bottom: 0px;
   top: 105px;
   left: 6px;
   right: 0px;
   background: #ffffff;
   padding: 20px 12px 20px 12px;
   width: 315px;
   height: 230px;
  font-family: 'arial' sans-serif;
   font-weight: 400;
   font-size: 11px;
   text-align: justify;
   letter-spacing: 0px;
   overflow-y: auto; 
   -webkit-transform: scale(0); 
   -o-transform: scale(0); 
   -moz-transform: scale(0); 
   -webkit-transition-duration: .8s; 
   -moz-transition-duration: .8s; 
   -o-transition-duration: .8s;
}
</style>





<body>
<div class="baddream">
<div class="stabs">
<div class="openroad">LOVE & FAMILY</div>
<div class="topdown">lee taemin - 21.09.2015</div> 
<div class="stab"><input type="radio" id="stab-1" name="stab-group-1" checked>
<label for="stab-1"><i class="fa fa-pencil-square-o"></i></label>
<div class="content">
<img src="http://funkyimg.com/i/22NyX.gif">
</div> 
</div>



<div class="stab">
<input type="radio" id="stab-3" name="stab-group-1">
<label for="stab-3"><i class="fa fa-phone"></i></label>
<div class="content">
<center><div style="width: 250px; height: 30px; background: #ea3535; font-family: lobster; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">важная информация</div>

<div class="althekiller">

<a href="URL"><div class="faceclaim"><div class="maleceleb">правила</div><div class="malechar">правила</div></a>
</div>


<a href="URL"><div class="faceclaim"><div class="maleceleb">сюжет</div><div class="malechar">сюжет</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">город любви</div><div class="malechar">город любви</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">объявления</div><div class="malechar">объявления</div></a>
</div>

<a href="URL"><div class="faceclaim"><div class="maleceleb">что-то</div><div class="malechar">что-то</div></a>
</div></center>
<P>
<P>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-4" name="stab-group-1">
<label for="stab-4"><i class="fa fa-male"></i></label>
<div class="content">
<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'><style type="text/css">.foofighters {background-color: #ffffff;color: #000000;width: 450px;border-top: 10px solid #000000;padding: 10px;text-align: center;}.whenilearnto {text-align: center;font-family: pathway gothic one;margin: 10px 0px;font-size: 30px;text-transform: uppercase; color: #634933;}.althekiller {width: 200px;float: left; padding-left: 60px; padding-top: 30px;}.althekiller .boys {font-family: pathway gothic one;font-size: 25px;color: #b1ce99;text-align: center;text-transform: uppercase; margin-bottom: 10px;}.althekiller .girls {font-family: pathway gothic one;font-size: 25px;color: #897393;text-align: center;text-transform: uppercase;margin-bottom: 10px;}.althekiller .faceclaim {width: 175px;height: 20px;display: block;overflow: hidden;margin-bottom: 5px; }.althekiller .maleceleb{background-color: #ea3535;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;}.althekiller .malechar{background-color: #000000;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;margin-top: -20px;opacity: 0;transition: .8s all;-moz-transition: .8s all;-webkit-transition: .8s all;-o-transition: .8s all;}.althekiller .malechar:hover {opacity: .99; }.althekiller .girlceleb{background-color: #897393;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;}.althekiller .girlchar{background-color: #000000;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;margin-top: -20px;opacity: 0;transition: .8s all;-moz-transition: .8s all;-webkit-transition: .8s all;-o-transition: .8s all;}.althekiller .girlchar:hover {opacity: .99; }</style><center>

<center><div style="width: 250px; height: 30px; background: #ea3535; font-family: lobster; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">оформление профиля</div>

<div class="althekiller">

<a href="URL"><div class="faceclaim"><div class="maleceleb">личное звание</div><div class="malechar">личное звание</div></a>
</div>


<a href="URL"><div class="faceclaim"><div class="maleceleb">отношения</div><div class="malechar">отношения</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">инстаграм</div><div class="malechar">инстаграм</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">внешности</div><div class="malechar">внешности</div></a>
</div>

<a href="URL"><div class="faceclaim"><div class="maleceleb">личная страница</div><div class="malechar">личная страница</div></a>
</div></center>
<P>
<P>
</div>
</div>
</div>




</body>

<!--HTML--> <style type="text/css"> /* MINI PROFILE BY DARREN CRISS AKA BECKY */
.minipoop4 { width: 200px; height: 300px; position: relative; overflow: hidden; margin: auto;}
.minipoop4 img { width: 200px; height: 300px; position: absolute; top: 0px; left: 0px; }
.minipoop4 .miniscreen { width: 200px; height: 300px; background-color: rgba(250,250,250,0.9); position: absolute; top: 0px; left: 0px; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; }
.minipoop4  .animatedii { position: absolute; top: 95px; left: 45px; width: 100px; height: 100px; padding: 5px; border-radius: 100%; border: 3px double #5db83d; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; } 
@-webkit-keyframes pulseii { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } 
@keyframes pulseii { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.pulseii { -webkit-animation-name: pulseii; animation-name: pulseii; }
.minipoop4 .minigif { position: absolute; top: 103px; left: 53px; transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; }
.minigif img { width: 100px; height: 100px; border-radius: 100%; }
.minipoop4:hover .miniscreen { opacity: 0;  transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; }
.minipoop4:hover .minigif, .minipoop2:hover .animatedii { top: -200px;  transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; }
.minipoop4 .minitop { width: 120px; height: 220px; padding: 20px; background-color: #fff; position: absolute; top: -300px; left: 20px;   box-shadow: 3px 3px 3px #f0f0f0; transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out;  }
.minipoop4:hover .minitop { transition: all .6s ease-in-out 1s; -webkit-transition: all .6s ease-in-out 1s; -moz-transition: all .6s ease-in-out 1s; -ms-transition: all .6s ease-in-out 1s; -o-transition: all .6s ease-in-out 1s; top: 20px; }
.minign4 { padding: 10px; width: 100px; background-color: #5db83d; font-family: cuprum, sans-serif; font-size: 13px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; margin-bottom: 10px; }
.mininame4 { width: 180px; padding: 10px; background-color: #5db83d; font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; margin: auto; }
.mininame a { font-family: 'Roboto Condensed', sans-serif; font-size: 20px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 700; }
.miniage04 { font-size: 60px; font-weight: 700; text-transform: uppercase; color: #5db83d; text-align: center; line-height: 100%; font-family: 'Roboto Condensed', sans-serif; }
.miniage40 { letter-spacing: 2px; padding: 5px; width: 110px; background-color: #5db83d; font-family: 'cuprum'; font-size: 9px; text-align: center; color: #fff; text-transform: uppercase; line-height: 100%; font-weight: 400; margin-bottom: 10px;}


</style>

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'><div class="minipoop4"><img src="http://funkyimg.com/i/22Ngj.png"><div class="miniscreen"></div> <div id="animatedii-example" class="animatedii pulseii"></div><div class="minigif"><img src="http://funkyimg.com/i/22NgA.gif"/></div><div class="minitop"><div class="minign4"> Career & Luxury</div><div class="miniage04"> 1 </div><div class="miniage40"> баллы </div></div></div><div class="mininame4"> <!-- |name| --> </div>