Mys2010 on Codepen

HomeAll Tutorials

Profile Card

Memasang kode Css3 Card Design
Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini
Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

body {
  margin: 0 auto;
  padding: 0;
  background: #222;
}

.left {
  left: 25px;
}

.right {
  right: 25px;
}

.center {
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 25px;
}

#gradient {
  background: #999955;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.2, #DAB046), color-stop(0.2, #D73B25), color-stop(0.4, #D73B25), color-stop(0.4, #C71B25), color-stop(0.6, #C71B25), color-stop(0.6, #961A39), color-stop(0.8, #961A39), color-stop(0.8, #601035));
  background-image: -webkit-linear-gradient(#CCC 20%, #CCC 20%, #CCC 40%, #CCC 40%, #CCC 60%, #961A39 60%, #CCC 80%, #CCC 80%);
  background-image: -moz-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: -o-linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
  background-image: linear-gradient(#CCC 20%, #333 20%, #333 40%, #CCC 40%, #CCC 60%, #333 60%, #333 80%, #CCC 80%);
  margin: 0 auto;
  margin-top: 100px;
  width: 100%;
  height: 150px;
}

#gradient:after {
  content: "";
  position: absolute;
  background: #E9E2D0;
  left: 50%;
  margin-top: -67.5px;
  margin-left: -270px;
  padding-left: 20px;
  border-radius: 5px;
  width: 520px;
  height: 275px;
  z-index: -1;
}

#card {
  position: absolute;
  width: 450px;
  height: 225px;
  padding: 25px;
  padding-top: 0;
  padding-bottom: 0;
  left: 50%;
  top: 67.5px;
  margin-left: -250px;
  background: #E9E2D0;
  box-shadow: 0 0 5px black;
  box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;
  z-index: 5;
}

#card img {
  width:125px;
  height:125px;
  float: left;
  border-radius: 0px;
  margin-right: 20px;
  -webkit-filter: sepia(1);
  -moz-filter: sepia(1);
  filter: sepia(1);
  border:solid 2px #ccc;
}

#card h2 {
  font-family: courier;
  color: #333;
  margin: 0 auto;
  padding: 0;
  font-size: 15pt;
}

#card p {
  font-family: courier;
  color: #555;
  font-size: 12px;
}

#card span {
  font-family: courier;
}

<div id="gradient"></div>
<div id="card">
  <img src="https://Link Gambar.jpg"/>
  <h2>Your Text..</h2>
  <p> Your Text.</p> 
  <p> Your Text.</p>
  <p> Your Text. ;)</p>
  <span class="left bottom">tel: 530 283 ****</span>
  <span class="right bottom">Your Text</span>
</div>

Penjelasan :
Edit code warna tambahkan teks serta link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Nuri Özdoğan on Codepen

DEMOSHOW

Category: Profile Card

Css3 Card Design

0 Comment

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

html {
  font-family: 'Arial';
  background: url('http://Link Gambar.png');
}a {
  color: #c20;
  text-decoration: underline;
}
.centered {
  margin: 0 auto;
}
.finer-print {
  font-size: 15px;
}
.span2 {
  width: 40%;
  padding: 0;float: left;
}
.business-card {
  position: relative;
  background: #eeeeec;
  color: #2e3436;
  width: 400px;
  height: 240px;
  font-size: 20px;
  border-bottom: 2px solid #d3d7df;
  border-radius: 15px;
  box-shadow: 0 0 10px 1px #000;
  margin-top: 5%;
}.business-card .title {
  background: #c00;
  color: #fff;
  height: 30px;
  padding: 10px;
  font-weight: bold;
  font-size: 25px;
  border-top: 2px solid #ef2929;
  border-left: 2px solid #ef2929;
  border-radius: 14px 14px 0 0;
}.business-card .content {
  font-weight: bold;
  padding: 15px;
}.business-card .avatar {
  float: right;
  max-width: 100px;
  max-height: 100px;
  box-shadow: 0 0 10px 1px #777;
  border-radius: 3px;
}.business-card .footer {
  position: absolute;
  bottom: 10px;
  left: 2%;
  font-size: 15px;
  padding-top: 5px;
  border-top: 1px solid;
  width: 96%;
}

<div class="business-card centered">
  <div class="title">
   Your Text  </div>
  <div class="content span2">
   Your Text<br />
    <span class="finer-print">Your Text<br />    
    </span>
  </div>
  <div class="content span2">
    <img src="http://Link Gambar.png" alt="avatar" class="avatar" />
  </div>
  <div class="footer">
    &copy; 2013 <a href="http://Link Title">Top Page Design</a>
  </div>
</div>

Penjelasan :
Edit code warna tambahkan teks serta link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Mark Fischer, Jr on Codepen

DEMOSHOW

Category: Css3 Card Design

CSS flat folded corner

Memasang kode Card UI Design Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

@import url(http://fonts.googleapis.com/css?family=Rosario:400,700); 

body{
  background: grey;
}

.folded_corner{
  position:relative;
  width:210px;
  margin:4vh auto;
  padding:40px;
  color:#fff;
  font: 20px'Rosario', sans-serif;
  background: #58a;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
    linear-gradient(-135deg, transparent 1.5em, #58a 0);
  
  -webkit-filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
  filter: drop-shadow(20px 30px rgba(0,0,0,0.1));
}
.folded_corner::before{
  content: ' ';
  position:absolute;
  top:2em; 
  right:0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,0.1) 0) 100% 0 no-repeat;
  width: 2em;
  height:2em;
  transform: rotate(180deg)
}

<div class="folded_corner">
  <p>Your Text or Link Image.</p>
</div>

/* inspired by:
  CSS secret 19: play.csssecrets.io/folded-corner 
  &
  CSS secret 16: play.sccsecrets.io/drop-shadow  
  
*/

Penjelasan :
Edit code warna tambahkan teks atau gunakan link gambar sesuai kinginan

Edited by. Myscript2010
Sources by. Sandra Robotos on Codepen

DEMOSHOW

Category: CSS flat folded corner

Card UI Design

Memasang kode Card UI Design
Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:#333;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}
.btn {
  text-decoration: none;
  color: #fff;
  background-color: #555;
  text-align: center;
  letter-spacing: .5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  z-index: 1;
  will-change: opacity, transform;
  transition: all .3s ease-out;
  border: none;
  border-radius: 2px;
  display: block;
  width: 20%;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 2rem;
  margin: 0 auto;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.btn:hover {
  background: #808080;
}
.btn i {
  margin-right: 8px;
}
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: 30%;
  margin: 0 auto .75rem;
  background-color: #888;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.card-top-section {
  position: relative;
  padding: 0 20px;
  background: #444;
}
.card-block {
  padding: 1.25rem 2rem;
}
.card-action {
  border-top: 1px solid rgba(160, 160, 160, 0.4);
  padding: 20px;
}
.card-title {
  margin-top:40px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2em;
  text-align: center;
  letter-spacing: -0.03em;
  font-weight: 900;
}
.card-img-top {
  position: relative;
  border-radius: 100%;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_a1lTOhqieieh0g3HFt0JS06sVoXF4_JoEejzIG9ZhR2w3Vo55pwcA0qQjxVh03ZDfp8KIqlHBfVjHz4CL8xL7pvC2BU-mfmudOtNPzmB8r-06NYH3ioHEcT7tqhrz25dX8vvqAQou6BU/s1600-r/M-2010.png) center top no-repeat;
  background-size: cover;
  bottom: -53px;}
</style>

<div class="card">
<div class="card-top-section">
<div class="card-img-top">
</div>
</div>

<div class="card-block">
<h4 class="card-title">
<span style="color:#800000;font-size:14pt">Myscript2010</h4>
<p class="card-text">
Hallo my friend<br>
I have a website, 
named M-2010<br>
I stayed in cibeber cimahi 
thank you</p>
</div>
<div class="card-action">
<a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Myscript2010"class="btn wave-ripples"> 
<span style="color:#800000;font-size:10pt">visit..</a>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#dad;"> EDITED BY. <a href="http://Link Download"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#dad;"> COPYRIGHT <a href="https://codepen.io/Myscript2010/pen/EPrrXj" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/kodesite/svn/Fade-mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/02/card-ui-design.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

<script>
var card = new TimelineMax();
card.set('.card', { autoAlpha: 0 }).set('.card-top-section', {
    y: -100,
    autoAlpha: 0
}).set('.card-block, .card-action', {
    y: 100,
    autoAlpha: 0
}).set('.card-img-top', {
    autoAlpha: 0,
    scale: 0.5
}).to('.card', 0.5, {
    autoAlpha: 1,
    ease: Quad.easeInOut
}).to('.card-top-section, .card-block, .card-action', 0.35, {
    autoAlpha: 1,
    y: 0,
    ease: Quad.easeInOut
}).to('.card-img-top', 0.5, {
    autoAlpha: 1,
    scale: 1,
    ease: Elastic.easeInOut
});     
</script>

Audio Code by. Jereme Causing
Design code is edited by. M - 2010 on Codepen

DEMOSHOW

* If you want to directly copy and paste you canDownload Here Card UI Design Audio

Category: Card UI Design

FnF.fm Audio Player

Memasang kode FnF.fm Audio Player Mp3 Untuk menerapkan kode tersebut Langkah awal
Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<style class="cp-pen-styles">
/* Requires font-awesome */
.player {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 210px;
    height: 100px;
    background: #000;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    height: 50px;
    width: 50px;
    background: #fff;
    border-radius: 50%;
    float: left;
    position: relative;
    cursor: pointer;
    color: #000;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .source-ctrl-container:hover {
    background: rgb(246,246,246); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%, rgba(225,225,225,1) 49%, rgba(241,241,241,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(246,246,246,1)), color-stop(49%,rgba(225,225,225,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(246,246,246,1) 0%,rgba(225,225,225,1) 49%,rgba(241,241,241,1) 50%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 10px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 18px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 18px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ffff00;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}</style>

<audio id="player">
<source src="http://radio.freeshoutcast.com:18714/;stream.ogg" type="audio/ogg">
<source src="https://sites.google.com/site/pelajaranku1/mp3ku/Cranberries-Dream-Mys2010.mp3?attredirects=0&d=1" type="audio/mpeg">
</audio>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'></script>

<script>
"use strict";

/**
 * Requires mootools core and mootools more Slider
 */

var Player = function(audio_element, options) {

    this.audio_obj = document.id(audio_element);
    this.options = options;

    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };

    this.render = function() {

        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);

        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );

        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );

        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };

    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));

        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };

    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };

    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }

        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;

        return time;
    }

    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };

    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };

}

var player = new Player('player');
player.init();
//# sourceURL=pen.js
</script>

Penjelasan : Ganti link Mp3 yang diwarnai sesuai kinginan

Edited by. Myscript2010
Sources by. Cartoonist ARiF on Codepen

DEMOSHOW

Category: FnF.fm Audio Player

Memasang Kode Bag Of Crisps

Memasang kode Bag of Crisps
Login ke akun blog klik tombol blog baru buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="BagOfCrisps-styles">
html, body {
    font-size: 18px;
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    background: #e7e7e7;
    color: #444;
    overflow: hidden;
}
/*General*/
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
}
a {
    color: white;
    text-decoration: none;
    transition: color 300ms linear; 
    -webkit-transition: color 300ms linear;  
    -moz-transition: color 300ms linear; 
}
a:hover {
    color: #CF8A05;
}

img {
    max-width: 100%;
    height: auto;
}
::selection {
    background: #CF8A05;
    color: #E7E7E7;
}
::-moz-selection {
    background: #CF8A05;
    color: #E7E7E7;
}
.cc {text-align:center;}
.email {font-family: 'Josefin Slab', serif; text-align:center;}
.nice {font-family: 'Quicksand', sans-serif; text-align:center;}
.reflect {
-webkit-box-reflect: below -35px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}

.space1 {
   margin:10% 0 0 0;
}
.bulb {
   transition: all 0.2s ease-in;
   text-decoration:none;
}
.bulb:hover {
  color:yellow;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #f7ff76;
}
.gear {
   transition: all 0.2s ease-in;
   text-decoration:none;
}

.gear:hover {
  color:#2ecc71;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}
.about {
   transition: all 0.2s ease-in;
   text-decoration:none;
}
.about:hover {
  color:#3498db;
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}
.mail {
   transition: all 0.2s ease-in;
   text-decoration:none;
}
.mail:hover {
   color:#1abc9c;
   text-shadow: 1px 0px 17px #8e44ad;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
}
.modallink {
   position:relative;
   bottom:0;
   right:0;
   height:50px;
   width:100%;
   color:#000;
   text-align:right;
}
.mailicons {
  margin:8px 10px 0 0;
  color:rgba(0, 0, 0, 0.8);
  transition: all 0.2s ease-in;
  text-decoration:none;
}
.mailicons:hover {
  color:rgba(0, 0, 0, 1);
 -webkit-stroke-width: 5.3px;
      -webkit-stroke-color: #FFFFFF;
      -webkit-fill-color: #FFFFFF;
      text-shadow: 1px 0px 17px #8e44ad;
}

/*body*/
.center {
   color:black;
   width: 320px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -160px;
   margin-top: -100px;
   text-align:center;
}
.centered {
   color:black;
   width: 340px;
   height: 200px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -170px;
   margin-top: -100px;
   text-align:center;
}
.choose {
   width: 48px;
   height: 48px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -24px;
   margin-top: -24px;
   text-align:center;
}
.title {
   font-family: 'Oswald', sans-serif;
   font-size:65px;
}
/*back*/
.back {
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}
.back1 {
   position:absolute;
   background:green;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}
.back2 {
   position:absolute;
   background:#d35400;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}

/*main window*/
.back3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlxRDY4abo9H-VJC5Y7jGS-wYeuwCYxEf1ikTuoW8MU3K8RKVxv244K4ycIxonOSjOFAg4W6j1QuwX8i19VDgAF5ayoBwFYsxaVKhYghtvLgvX8UNErqXffRbbCQDoVJAayXE_VCZ1PV4y/s1600-r/poek-mys2010.jpg);
   text-align:center;
   position:absolute;
   background-color: black;
   color: #efefef;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}
.bartop {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:30px;
   background-color:transparent;
   text-align:center;
}
.barbottom {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:30px;
   background-color:transparent;
   text-align:center;
}
.barleft {
   position:absolute;
   bottom:0;
   left:0;
   width:30px;
   height:100%;
   background-color:transparent;
   text-align:center;
}
.barright {
   bottom:0;
   right:0;
   position:absolute;
   width:30px;
   height:100%;
   background-color:transparent;
   text-align:center;
}
.nav1 {
   top:0;
   left:0;
   position:absolute;
   width:100%;
   height:30%;
   background-color:rgba(42, 22, 20, 0.9);
   text-align:center;
   border-right:thick double #ff0000;
   border-bottom:thick double #ff0000;
}
.nav2 {
   bottom:0;
   right:0;
   position:absolute;
   width:100%;
   height:30%;
   background-color:rgba(42, 22, 20, 0.9);
   text-align:center;
   border-left:thick double #ff0000;
   border-top:thick double #ff0000;
}
.menu1 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   top:25%;
   left:0;
   border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.menu2 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   bottom:25%;
   right:0;
border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.menu3 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   bottom:25%;
   left:0;
border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.menu4 {
   position:absolute;
   background-color: #000;
   width:28%;
   margin:10px;
   height:20%;
   top:25%;
   right:0;
border:double 5px #ff0000;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}

/*main window*/
.backbox {
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}
/* crunch*/
.slam1 {
   position:absolute;
   background:transparent;
   color:white;
   width:106%;
   margin:0px;
   height:60%;
   top:-10%;
   left:-3%;

}
.slam2 {
   position:absolute;
   background:transparent;
   width:106%;
   margin:0px;
   height:60%;
   bottom:-10%;
   left:-3%;

}
/*teeth*/
.tooth {
   position:relative;
   float:left;
   width:25%;
   height:100%;
   background:white;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:inset 0px -3px 48px #000000;
-webkit-box-shadow:inset 0px -3px 48px #000000;
box-shadow:inset 0px -3px 48px #000000;

}
/*bam*/
.bam {
   text-align:center;
   position:absolute;
   background:#16a085;
   width:100%;
   margin:0px;
   height:100%;
   top:0;
   left:0;
}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}
/*bam*/
.ani {
 -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
      -o-animation-duration: 1s;
         animation-duration: 1s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}
.ani2 {
 -webkit-animation-duration: 3.3s;
    -moz-animation-duration: 3.3s;
      -o-animation-duration: 3.3s;
         animation-duration: 3.3s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}

@-webkit-keyframes crunchup {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -webkit-transform: translateY(2000px);
 }

 70% {
  -webkit-transform: translateY(0);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}
@-moz-keyframes crunchup {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -moz-transform: translateY(2000px);
 }

 70% {
  -moz-transform: translateY(0);
 }

 100% {
  -moz-transform: translateY(0);
 }
}

@-o-keyframes crunchup {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  -o-transform: translateY(2000px);
 }

 70% {
  -o-transform: translateY(0);
 }

 100% {
  -o-transform: translateY(0);
 }
}
@keyframes crunchup {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }

 50% {
  opacity: 1;
  transform: translateY(2000px);
 }

 70% {
  transform: translateY(0);
 }

 100% {
  transform: translateY(0);
 }
}
.ani.crunchup {
 -webkit-animation-name: crunchup;
 -moz-animation-name: crunchup;
 -o-animation-name: crunchup;
 animation-name: crunchup;
        -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}
@-webkit-keyframes crunchdown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -webkit-transform: translateY(-2000px);
 }

 70% {
  -webkit-transform: translateY(0);
 }

 100% {
  -webkit-transform: translateY(0);
 }
}
@-moz-keyframes crunchdown {
 0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -moz-transform: translateY(-2000px);
 }

 70% {
  -moz-transform: translateY(0);
 }

 100% {
  -moz-transform: translateY(0);
 }
}
@-o-keyframes crunchdown {
 0% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  -o-transform: translateY(-2000px);
 }

 70% {
  -o-transform: translateY(0);
 }

 100% {
  -o-transform: translateY(0);
 }
}
@keyframes crunchdown {
 0% {
  opacity: 0;
  transform: translateY(-2000px);
 }

 50% {
  opacity: 1;
  transform: translateY(-2000px);
 }

 70% {
  transform: translateY(0);
 }

 100% {
  transform: translateY(0);
 }
}
.ani.crunchdown {
 -webkit-animation-name: crunchdown;
 -moz-animation-name: crunchdown;
 -o-animation-name: crunchdown;
 animation-name: crunchdown;
        -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}
/*crunch*/
@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
 50% { -webkit-transform: scale(0.8); }
    100% { -webkit-transform: scale(1.3); }
}
@-moz-keyframes pulse {
    0% { -moz-transform: scale(1); }
 50% { -moz-transform: scale(0.8); }
    100% { -moz-transform: scale(1.3); }
}
@-o-keyframes pulse {
    0% { -o-transform: scale(1); }
 50% { -o-transform: scale(0.8); }
    100% { -o-transform: scale(1.3); }
}
@keyframes pulse {
    0% { transform: scale(1); }
 50% { transform: scale(0.8); }
    100% { transform: scale(1.3); }
}
.ani.pulse {
 -webkit-animation-name: pulse;
 -moz-animation-name: pulse;
 -o-animation-name: pulse;
 animation-name: pulse;
  -moz-animation-delay: 1.5s;
        -webkit-animation-delay: 1.5s;
        -o-animation-delay: 1.5s;
        animation-delay: 1.5s;
}
@-webkit-keyframes shake {
 0%, 100% {-webkit-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
 0%, 100% {-moz-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
 0%, 100% {-o-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
 0%, 100% {transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.ani.shake {
 -webkit-animation-name: shake;
 -moz-animation-name: shake;
 -o-animation-name: shake;
 animation-name: shake;
  -moz-animation-delay: 3.4s;
        -webkit-animation-delay: 3.4s;
        -o-animation-delay: 3.4s;
        animation-delay: 3.4s;
}
@-webkit-keyframes shaker {
 0%, 100% {-webkit-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-webkit-transform: translateX(-10px);}
}
@-moz-keyframes shaker {
 0%, 100% {-moz-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-moz-transform: translateX(-10px);}
}
@-o-keyframes shaker {
 0%, 100% {-o-transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {-o-transform: translateX(10px);}
 20%, 40%, 60%, 80% {-o-transform: translateX(-10px);}
}
@keyframes shaker {
 0%, 100% {transform: translateX(0);}
 10%, 30%, 50%, 70%, 90% {transform: translateX(10px);}
 20%, 40%, 60%, 80% {transform: translateX(-10px);}
}
.ani.shaker {
 -webkit-animation-name: shaker;
 -moz-animation-name: shaker;
 -o-animation-name: shaker;
 animation-name: shaker;
  -moz-animation-delay: 3.4s;
        -webkit-animation-delay: 3.4s;
        -o-animation-delay: 3.4s;
        animation-delay: 3.4s;
}

@-webkit-keyframes backout {
 0% {
  opacity: 1;
  -webkit-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }
}

@-moz-keyframes backout {
 0% {
  opacity: 1;
  -moz-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }
}

@-o-keyframes backout {
 0% {
  opacity: 1;
  -o-transform: translateY(0);
 }

 100% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }
}

@keyframes backout {
 0% {
  opacity: 1;
  transform: translateY(0);
 }

 100% {
  opacity: 0;
  transform: translateY(2000px);
 }
}

.ani.backout {
 -webkit-animation-name: backout;
 -moz-animation-name: backout;
 -o-animation-name: backout;
 animation-name: backout;
        -moz-animation-delay: 2.3s;
        -webkit-animation-delay: 2.3s;
        -o-animation-delay: 2.3s;
        animation-delay: 2.3s;
}

@-webkit-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-moz-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-o-keyframes fadeIn0 {
 0% {opacity: 1;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes fadeIn0 {
 0% {opacity: 1;}
 20% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

.ani.fadeIn0 {
 -webkit-animation-name: fadeIn0;
 -moz-animation-name: fadeIn0;
 -o-animation-name: fadeIn0;
 animation-name: fadeIn0;
       -moz-animation-delay: 2.4s;
        -webkit-animation-delay: 2.4s;
        -o-animation-delay: 2.4s;
        animation-delay: 2.4s;
}

@-webkit-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn {
 -webkit-animation-name: fadeIn;
 -moz-animation-name: fadeIn;
 -o-animation-name: fadeIn;
 animation-name: fadeIn;

}

@-webkit-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn1 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn1 {
 -webkit-animation-name: fadeIn1;
 -moz-animation-name: fadeIn1;
 -o-animation-name: fadeIn1;
 animation-name: fadeIn1;
       -moz-animation-delay: 4.2s;
        -webkit-animation-delay: 4.2s;
        -o-animation-delay: 4.2s;
        animation-delay: 4.2s;
}


@-webkit-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn2 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn2 {
 -webkit-animation-name: fadeIn2;
 -moz-animation-name: fadeIn2;
 -o-animation-name: fadeIn2;
 animation-name: fadeIn2;
       -moz-animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -o-animation-delay: 5s;
        animation-delay: 5s;
}

@-webkit-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn3 {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn3 {
 -webkit-animation-name: fadeIn3;
 -moz-animation-name: fadeIn3;
 -o-animation-name: fadeIn3;
 animation-name: fadeIn3;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}


@-webkit-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-moz-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@-o-keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

@keyframes fadeIn4 {
 0% {opacity: 0;}
 40% {opacity: 1;}
 60% {opacity: 1;}
 100% {opacity: 0;}
}

.ani2.fadeIn4 {
 -webkit-animation-name: fadeIn4;
 -moz-animation-name: fadeIn4;
 -o-animation-name: fadeIn4;
 animation-name: fadeIn4;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}

@-webkit-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@-moz-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@-o-keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes fadeIn5 {
 0% {opacity: 0;}
 30% {opacity: 1;}
 70% {opacity: 0;}
 100% {opacity: 1;}
}

.ani.fadeIn5 {
 -webkit-animation-name: fadeIn5;
 -moz-animation-name: fadeIn5;
 -o-animation-name: fadeIn5;
 animation-name: fadeIn5;
       -moz-animation-delay: 9.7s;
        -webkit-animation-delay: 9.7s;
        -o-animation-delay: 9.7s;
        animation-delay: 9.7s;
}

@-webkit-keyframes rotateInUpLeft {
 0% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -webkit-transform-origin: left bottom;
  -webkit-transform: rotate(0);
  opacity: 1;
 }
}

@-moz-keyframes rotateInUpLeft {
 0% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -moz-transform-origin: left bottom;
  -moz-transform: rotate(0);
  opacity: 1;
 }
}

@-o-keyframes rotateInUpLeft {
 0% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  -o-transform-origin: left bottom;
  -o-transform: rotate(0);
  opacity: 1;
 }
}

@keyframes rotateInUpLeft {
 0% {
  transform-origin: left bottom;
  transform: rotate(90deg);
  opacity: 0;
 }

 100% {
  transform-origin: left bottom;
  transform: rotate(0);
  opacity: 1;
 }
}

.ani.rotateInUpLeft {
 -webkit-animation-name: rotateInUpLeft;
 -moz-animation-name: rotateInUpLeft;
 -o-animation-name: rotateInUpLeft;
 animation-name: rotateInUpLeft;
       -moz-animation-delay: 5.3s;
        -webkit-animation-delay: 5.3s;
        -o-animation-delay: 5.3s;
        animation-delay: 5.3s;
}

@-webkit-keyframes rotateOut {
 0% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(200deg);
  opacity: 0;
 }
}

@-moz-keyframes rotateOut {
 0% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -moz-transform-origin: center center;
  -moz-transform: rotate(200deg);
  opacity: 0;
 }
}

@-o-keyframes rotateOut {
 0% {
  -o-transform-origin: center center;
  -o-transform: rotate(0);
  opacity: 1;
 }

 100% {
  -o-transform-origin: center center;
  -o-transform: rotate(200deg);
  opacity: 0;
 }
}

@keyframes rotateOut {
 0% {
  transform-origin: center center;
  transform: rotate(0);
  opacity: 1;
 }

 100% {
  transform-origin: center center;
  transform: rotate(180deg);
  opacity: 0;
 }
}

.ani.rotateOut {
 -webkit-animation-name: rotateOut;
 -moz-animation-name: rotateOut;
 -o-animation-name: rotateOut;
 animation-name: rotateOut;
       -moz-animation-delay: 5.2s;
        -webkit-animation-delay: 5.2s;
        -o-animation-delay: 5.2s;
        animation-delay: 5.2s;
}

@-webkit-keyframes bounceInUp {
 0% {
  opacity: 0;
  -webkit-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(-30px);
 }

 80% {
  -webkit-transform: translateY(10px);
 }

 100% {
  -webkit-transform: translateY(-200px);
 }
}
@-moz-keyframes bounceInUp {
 0% {
  opacity: 0;
  -moz-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(-30px);
 }

 80% {
  -moz-transform: translateY(10px);
 }

 100% {
  -moz-transform: translateY(-200px);
 }
}

@-o-keyframes bounceInUp {
 0% {
  opacity: 0;
  -o-transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(-30px);
 }

 80% {
  -o-transform: translateY(10px);
 }

 100% {
  -o-transform: translateY(-200px);
 }
}

@keyframes bounceInUp {
 0% {
  opacity: 0;
  transform: translateY(2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(-30px);
 }

 80% {
  transform: translateY(10px);
 }

 100% {
  transform: translateY(-200px);
 }
}

.ani.bounceInUp {
 -webkit-animation-name: bounceInUp;
 -moz-animation-name: bounceInUp;
 -o-animation-name: bounceInUp;
 animation-name: bounceInUp;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}
@-webkit-keyframes bounceInDown {
 0% {
  opacity: 0;
  -webkit-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateY(30px);
 }

 80% {
  -webkit-transform: translateY(-10px);
 }

 100% {
  -webkit-transform: translateY(200px);
 }
}

@-moz-keyframes bounceInDown {
 0% {
  opacity: 0;
  -moz-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateY(30px);
 }

 80% {
  -moz-transform: translateY(-10px);
 }

 100% {
  -moz-transform: translateY(200px);
 }
}

@-o-keyframes bounceInDown {
 0% {
  opacity: 0;
  -o-transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateY(30px);
 }

 80% {
  -o-transform: translateY(-10px);
 }

 100% {
  -o-transform: translateY(200px);
 }
}

@keyframes bounceInDown {
 0% {
  opacity: 0;
  transform: translateY(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateY(30px);
 }

 80% {
  transform: translateY(-10px);
 }

 100% {
  transform: translateY(200px);
 }
}

.ani.bounceInDown {
 -webkit-animation-name: bounceInDown;
 -moz-animation-name: bounceInDown;
 -o-animation-name: bounceInDown;
 animation-name: bounceInDown;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
}
@-webkit-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(30px);
 }

 80% {
  -webkit-transform: translateX(-10px);
 }

 100% {
  -webkit-transform: translateX(200px);
 }
}

@-moz-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(30px);
 }

 80% {
  -moz-transform: translateX(-10px);
 }

 100% {
  -moz-transform: translateX(200px);
 }
}

@-o-keyframes bounceInLeft {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(30px);
 }

 80% {
  -o-transform: translateX(-10px);
 }

 100% {
  -o-transform: translateX(200px);
 }
}

@keyframes bounceInLeft {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(30px);
 }

 80% {
  transform: translateX(-10px);
 }

 100% {
  transform: translateX(200px);
 }
}

.ani.bounceInLeft {
 -webkit-animation-name: bounceInLeft;
 -moz-animation-name: bounceInLeft;
 -o-animation-name: bounceInLeft;
 animation-name: bounceInLeft;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;

}
@-webkit-keyframes bounceInRight {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(-30px);
 }

 80% {
  -webkit-transform: translateX(10px);
 }

 100% {
  -webkit-transform: translateX(-200px);
 }
}

@-moz-keyframes bounceInRight {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(10px);
 }

 100% {
  -moz-transform: translateX(-200px);
 }
}

@-o-keyframes bounceInRight {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(-30px);
 }

 80% {
  -o-transform: translateX(10px);
 }

 100% {
  -o-transform: translateX(-200px);
 }
}

@keyframes bounceInRight {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(-30px);
 }

 80% {
  transform: translateX(10px);
 }

 100% {
  transform: translateX(-200px);
 }
}

.ani.bounceInRight {
 -webkit-animation-name: bounceInRight;
 -moz-animation-name: bounceInRight;
 -o-animation-name: bounceInRight;
 animation-name: bounceInRight;
       -moz-animation-delay: 6s;
        -webkit-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;

}

@-webkit-keyframes tada {
 0% {-webkit-transform: scale(1); }
 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
 100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
 0% {-moz-transform: scale(1);}
 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
 100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
 0% {-o-transform: scale(1);}
 10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
 100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
 0% {transform: scale(1);}
 10%, 20% {transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
 100% {transform: scale(1) rotate(0);}
}

.ani.tada {
 -webkit-animation-name: tada;
 -moz-animation-name: tada;
 -o-animation-name: tada;
 animation-name: tada;
       -moz-animation-delay: 5s;
        -webkit-animation-delay: 5s;
        -o-animation-delay: 5s;
        animation-delay: 5s;
}

@-webkit-keyframes slideinleft {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(-70px);
 }
}

@-moz-keyframes slideinleft {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-70px);
 }
}

@-o-keyframes slideinleft {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-70px);
 }
}

@keyframes slideinleft {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-70px);
 }
}

.ani.slideinleft {
 -webkit-animation-name: slideinleft;
 -moz-animation-name: slideinleft;
 -o-animation-name: slideinleft;
 animation-name: slideinleft;
       -moz-animation-delay: 7.5s;
        -webkit-animation-delay: 7.5s;
        -o-animation-delay: 7.5s;
        animation-delay: 7.5s;

}

@-webkit-keyframes slideinright {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(70px);
 }
}

@-moz-keyframes slideinright {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(70px);
 }
}

@-o-keyframes slideinright {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(70px);
 }
}

@keyframes slideinright {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(70px);
 }
}

.ani.slideinright {
 -webkit-animation-name: slideinright;
 -moz-animation-name: slideinright;
 -o-animation-name: slideinright;
 animation-name: slideinright;
       -moz-animation-delay: 7.8s;
        -webkit-animation-delay: 7.8s;
        -o-animation-delay: 7.8s;
        animation-delay: 7.8s;

}

@-webkit-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(-100px);
 }
}

@-moz-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-100px);
 }
}

@-o-keyframes slideinleft0 {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-100px);
 }
}

@keyframes slideinleft0 {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-100px);
 }
}

.ani.slideinleft0 {
 -webkit-animation-name: slideinleft0;
 -moz-animation-name: slideinleft0;
 -o-animation-name: slideinleft0;
 animation-name: slideinleft0;
       -moz-animation-delay: 8.5s;
        -webkit-animation-delay: 8.5s;
        -o-animation-delay: 8.5s;
        animation-delay: 8.5s;

}

@-webkit-keyframes slideinright0 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(100px);
 }
}

@-moz-keyframes slideinright0 {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(100px);
 }
}

@-o-keyframes slideinright0 {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(100px);
 }
}

@keyframes slideinright0 {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(100px);
 }
}

.ani.slideinright0 {
 -webkit-animation-name: slideinright0;
 -moz-animation-name: slideinright0;
 -o-animation-name: slideinright0;
 animation-name: slideinright0;
       -moz-animation-delay: 8.5s;
        -webkit-animation-delay: 8.5s;
        -o-animation-delay: 8.5s;
        animation-delay: 8.5s;

}

@-webkit-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px, -30px);
  -webkit-transform: translateY(100px);
 }
}

@-moz-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -moz-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(-30px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(100px);
 }
}

@-o-keyframes slideinleft1 {
 0% {
  opacity: 0;
  -o-transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(100px);
 }
}

@keyframes slideinleft1 {
 0% {
  opacity: 0;
  transform: translateX(-2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(100px);
 }
}

.ani.slideinleft1 {
 -webkit-animation-name: slideinleft1;
 -moz-animation-name: slideinleft1;
 -o-animation-name: slideinleft1;
 animation-name: slideinleft1;
       -moz-animation-delay: 9.5s;
        -webkit-animation-delay: 9.5s;
        -o-animation-delay: 9.5s;
        animation-delay: 9.5s;

}

@-webkit-keyframes slideinright1 {
 0% {
  opacity: 0;
  -webkit-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -webkit-transform: translateX(0px);
 }

 80% {
  -webkit-transform: translateX(0px);
 }

 100% {
  -webkit-transform: translateX(0px);
  -webkit-transform: translateY(-100px);
 }
}

@-moz-keyframes slideinright1 {
 0% {
  opacity: 0;
  -moz-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -moz-transform: translateX(0px);
 }

 80% {
  -moz-transform: translateX(0px);
 }

 100% {
  -moz-transform: translateX(0px);
  -moz-transform: translateY(-100px);
 }
}

@-o-keyframes slideinright1 {
 0% {
  opacity: 0;
  -o-transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  -o-transform: translateX(0px);
 }

 80% {
  -o-transform: translateX(0px);
 }

 100% {
  -o-transform: translateX(0px);
  -o-transform: translateY(-100px);
 }
}

@keyframes slideinright1 {
 0% {
  opacity: 0;
  transform: translateX(2000px);
 }

 60% {
  opacity: 1;
  transform: translateX(0px);
 }

 80% {
  transform: translateX(0px);
 }

 100% {
  transform: translateX(0px);
  transform: translateY(-100px);
 }
}

.ani.slideinright1 {
 -webkit-animation-name: slideinright1;
 -moz-animation-name: slideinright1;
 -o-animation-name: slideinright1;
 animation-name: slideinright1;
       -moz-animation-delay: 9.5s;
        -webkit-animation-delay: 9.5s;
        -o-animation-delay: 9.5s;
        animation-delay: 9.5s;

}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #cccccc; }
    .mfp-preloader a:hover {
      color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444; }
  .mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure {
    /* The shadow behind the image */ }
    .mfp-img-mobile .mfp-figure:after {
      top: 0;
      bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
      display: inline;
      margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #cccccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #cccccc; }
    .mfp-preloader a:hover {
      color: white; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }
button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: white;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover, .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333333; }

.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
  color: white;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #cccccc;
  font-size: 12px;
  line-height: 18px; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after, .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before, .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
    border-right: 17px solid white;
    margin-left: 31px; }
  .mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
    border-left: 17px solid white;
    margin-left: 39px; }
  .mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3f3f3f; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: black; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444444; }
  .mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure {
    /* The shadow behind the image */ }
    .mfp-img-mobile .mfp-figure:after {
      top: 0;
      bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
      display: inline;
      margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
  padding: 0; }
.mfp-ie7 .mfp-content {
  padding-top: 44px; }
.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

</style>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Quicksand|Josefin+Slab|Oswald:700' rel='stylesheet' type='text/css'>
<link href='http://daneden.github.io/animate.css/animate.min.css' rel='stylesheet' type='text/css'>

<div class="ani fadeIn">
<div class="ani fadeIn0 center"> 
<h1 class="title">WE PUT THE</h1>
</div>

<div class="ani backout back">
<div class="ani pulse center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmKO1S0V2kCs6jJ1Pqi5CIvvoTDhfx6GTr6sr5bUXGjRG0mw5_eTIR2tpllsq00n8xK24RkqGl-CRZCzaq3d_XH-SNdT7Xsudwj7Gknt9VKN27OUxV_rRiyG1-A11XlMsYnJb0pRVXUw/s1600/edit-M2010.jpg"></a>
</div>
</div>


  
<div class="slam1 ani crunchdown">
<div class="tooth ani shake">
</div>
<div class="tooth ani shake">
</div>
<div class="tooth ani shake">
</div><div class="tooth ani shake">
</div>
</div>
  
<div class="slam2 ani crunchup">
<div class="tooth ani shaker">
</div><div class="tooth ani shaker">
</div><div class="tooth ani shaker">
</div><div class="tooth ani shaker">
</div> 
</div>
 
<div class="ani fadeIn1 back1">
<div class="center">   
<h1 class="ani rotateOut title">IN YOUR</h1>
</div>
</div>
<div class="ani fadeIn2 back2">
<div class="centered">   
<h1 class="ani tada title">
</h1>
</div> 
</div>



/*main window*/
<div class="ani fadeIn3 back3">  
<div class="ani bounceInUp bartop">
</div>
<div class="ani bounceInDown barbottom">
</div>
<div class="ani bounceInLeft barright">
</div>
<div class="ani bounceInRight barleft">
</div>
 
<div class="ani slideinleft nav1"> 
</div>
<div class="ani slideinright nav2">
</div>

<div class="ani2 fadeIn4 center">
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png">
</div>

<div class="ani slideinleft0 menu1">
<div class="choose">
<a href="#pop1" class="open-popup-link">
<i class="bulb fa fa-lightbulb-o fa-3x">
</i></a>
</div>
</div>

<div class="ani slideinright0 menu2">
<div class="choose">
<a href="#pop2" class="open-popup-link">
<i class="mail fa fa-envelope fa-3x">
</i></a>
</div>
</div>

<div class="ani slideinleft1 menu3">
<div class="choose">
<a href="#pop3" class="open-popup-link">
<i class="about fa fa-users fa-3x">
</i></a>
</div>
</div>

<div class="ani slideinright1 menu4">
<div class="choose">
<a href="#pop4" class="open-popup-link">
<i class="gear fa fa-cog fa-3x">
</i></a>
</div>
</div>

<div class="ani fadeIn5 center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmKO1S0V2kCs6jJ1Pqi5CIvvoTDhfx6GTr6sr5bUXGjRG0mw5_eTIR2tpllsq00n8xK24RkqGl-CRZCzaq3d_XH-SNdT7Xsudwj7Gknt9VKN27OUxV_rRiyG1-A11XlMsYnJb0pRVXUw/s1600/edit-M2010.jpg">
</div>
</div>  

/*main window*/
<div id="pop1" class="white-popup mfp-hide"> 
<h1 class="title reflect cc">CONCEPT</h1>
<p class="nice">
Your face is green!
</p>
</div>


<div id="pop2" class="white-popup mfp-hide">
<h1 class="title reflect cc">SHOUTBOX</h1>
<p class="email">
myscript2010s@gmail.com
</p>
</div>


<div id="pop3" class="white-popup mfp-hide">
<h1 class="title reflect cc">WHO WE ARE</h1>
<p class="nice">
Developers, designers, musicians & all the production
</p>
</div>


<div id="pop4" class="white-popup mfp-hide">
<h1 class="title reflect cc">WORKS</h1>
<p class="nice">
That's your choice
</p>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>
;
(function ($) {
    var CLOSE_EVENT = 'Close', BEFORE_CLOSE_EVENT = 'BeforeClose', AFTER_CLOSE_EVENT = 'AfterClose', BEFORE_APPEND_EVENT = 'BeforeAppend', MARKUP_PARSE_EVENT = 'MarkupParse', OPEN_EVENT = 'Open', CHANGE_EVENT = 'Change', NS = 'mfp', EVENT_NS = '.' + NS, READY_CLASS = 'mfp-ready', REMOVING_CLASS = 'mfp-removing', PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
    var mfp, MagnificPopup = function () {
        }, _isJQ = !!window.jQuery, _prevStatus, _window = $(window), _body, _document, _prevContentType, _wrapClasses, _currPopupType;
    var _mfpOn = function (name, f) {
            mfp.ev.on(NS + name + EVENT_NS, f);
        }, _getEl = function (className, appendTo, html, raw) {
            var el = document.createElement('div');
            el.className = 'mfp-' + className;
            if (html) {
                el.innerHTML = html;
            }
            if (!raw) {
                el = $(el);
                if (appendTo) {
                    el.appendTo(appendTo);
                }
            } else if (appendTo) {
                appendTo.appendChild(el);
            }
            return el;
        }, _mfpTrigger = function (e, data) {
            mfp.ev.triggerHandler(NS + e, data);
            if (mfp.st.callbacks) {
                e = e.charAt(0).toLowerCase() + e.slice(1);
                if (mfp.st.callbacks[e]) {
                    mfp.st.callbacks[e].apply(mfp, $.isArray(data) ? data : [data]);
                }
            }
        }, _setFocus = function () {
            (mfp.st.focus ? mfp.content.find(mfp.st.focus).eq(0) : mfp.wrap).focus();
        }, _getCloseBtn = function (type) {
            if (type !== _currPopupType || !mfp.currTemplate.closeBtn) {
                mfp.currTemplate.closeBtn = $(mfp.st.closeMarkup.replace('%title%', mfp.st.tClose));
                _currPopupType = type;
            }
            return mfp.currTemplate.closeBtn;
        }, _checkInstance = function () {
            if (!$.magnificPopup.instance) {
                mfp = new MagnificPopup();
                mfp.init();
                $.magnificPopup.instance = mfp;
            }
        }, supportsTransitions = function () {
            var s = document.createElement('p').style, v = [
                    'ms',
                    'O',
                    'Moz',
                    'Webkit'
                ];
            if (s['transition'] !== undefined) {
                return true;
            }
            while (v.length) {
                if (window.CP.shouldStopExecution(1)) {
                    break;
                }
                if (v.pop() + 'Transition' in s) {
                    return true;
                }
            }
            window.CP.exitedLoop(1);
            return false;
        };
    MagnificPopup.prototype = {
        constructor: MagnificPopup,
        init: function () {
            var appVersion = navigator.appVersion;
            mfp.isIE7 = appVersion.indexOf('MSIE 7.') !== -1;
            mfp.isIE8 = appVersion.indexOf('MSIE 8.') !== -1;
            mfp.isLowIE = mfp.isIE7 || mfp.isIE8;
            mfp.isAndroid = /android/gi.test(appVersion);
            mfp.isIOS = /iphone|ipad|ipod/gi.test(appVersion);
            mfp.supportsTransition = supportsTransitions();
            mfp.probablyMobile = mfp.isAndroid || mfp.isIOS || /(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent);
            _body = $(document.body);
            _document = $(document);
            mfp.popupsCache = {};
        },
        open: function (data) {
            var i;
            if (data.isObj === false) {
                mfp.items = data.items.toArray();
                mfp.index = 0;
                var items = data.items, item;
                for (i = 0; i < items.length; i++) {
                    if (window.CP.shouldStopExecution(2)) {
                        break;
                    }
                    item = items[i];
                    if (item.parsed) {
                        item = item.el[0];
                    }
                    if (item === data.el[0]) {
                        mfp.index = i;
                        break;
                    }
                }
                window.CP.exitedLoop(2);
            } else {
                mfp.items = $.isArray(data.items) ? data.items : [data.items];
                mfp.index = data.index || 0;
            }
            if (mfp.isOpen) {
                mfp.updateItemHTML();
                return;
            }
            mfp.types = [];
            _wrapClasses = '';
            if (data.mainEl && data.mainEl.length) {
                mfp.ev = data.mainEl.eq(0);
            } else {
                mfp.ev = _document;
            }
            if (data.key) {
                if (!mfp.popupsCache[data.key]) {
                    mfp.popupsCache[data.key] = {};
                }
                mfp.currTemplate = mfp.popupsCache[data.key];
            } else {
                mfp.currTemplate = {};
            }
            mfp.st = $.extend(true, {}, $.magnificPopup.defaults, data);
            mfp.fixedContentPos = mfp.st.fixedContentPos === 'auto' ? !mfp.probablyMobile : mfp.st.fixedContentPos;
            if (mfp.st.modal) {
                mfp.st.closeOnContentClick = false;
                mfp.st.closeOnBgClick = false;
                mfp.st.showCloseBtn = false;
                mfp.st.enableEscapeKey = false;
            }
            if (!mfp.bgOverlay) {
                mfp.bgOverlay = _getEl('bg').on('click' + EVENT_NS, function () {
                    mfp.close();
                });
                mfp.wrap = _getEl('wrap').attr('tabindex', -1).on('click' + EVENT_NS, function (e) {
                    if (mfp._checkIfClose(e.target)) {
                        mfp.close();
                    }
                });
                mfp.container = _getEl('container', mfp.wrap);
            }
            mfp.contentContainer = _getEl('content');
            if (mfp.st.preloader) {
                mfp.preloader = _getEl('preloader', mfp.container, mfp.st.tLoading);
            }
            var modules = $.magnificPopup.modules;
            for (i = 0; i < modules.length; i++) {
                if (window.CP.shouldStopExecution(3)) {
                    break;
                }
                var n = modules[i];
                n = n.charAt(0).toUpperCase() + n.slice(1);
                mfp['init' + n].call(mfp);
            }
            window.CP.exitedLoop(3);
            _mfpTrigger('BeforeOpen');
            if (mfp.st.showCloseBtn) {
                if (!mfp.st.closeBtnInside) {
                    mfp.wrap.append(_getCloseBtn());
                } else {
                    _mfpOn(MARKUP_PARSE_EVENT, function (e, template, values, item) {
                        values.close_replaceWith = _getCloseBtn(item.type);
                    });
                    _wrapClasses += ' mfp-close-btn-in';
                }
            }
            if (mfp.st.alignTop) {
                _wrapClasses += ' mfp-align-top';
            }
            if (mfp.fixedContentPos) {
                mfp.wrap.css({
                    overflow: mfp.st.overflowY,
                    overflowX: 'hidden',
                    overflowY: mfp.st.overflowY
                });
            } else {
                mfp.wrap.css({
                    top: _window.scrollTop(),
                    position: 'absolute'
                });
            }
            if (mfp.st.fixedBgPos === false || mfp.st.fixedBgPos === 'auto' && !mfp.fixedContentPos) {
                mfp.bgOverlay.css({
                    height: _document.height(),
                    position: 'absolute'
                });
            }
            if (mfp.st.enableEscapeKey) {
                _document.on('keyup' + EVENT_NS, function (e) {
                    if (e.keyCode === 27) {
                        mfp.close();
                    }
                });
            }
            _window.on('resize' + EVENT_NS, function () {
                mfp.updateSize();
            });
            if (!mfp.st.closeOnContentClick) {
                _wrapClasses += ' mfp-auto-cursor';
            }
            if (_wrapClasses)
                mfp.wrap.addClass(_wrapClasses);
            var windowHeight = mfp.wH = _window.height();
            var windowStyles = {};
            if (mfp.fixedContentPos) {
                if (mfp._hasScrollBar(windowHeight)) {
                    var s = mfp._getScrollbarSize();
                    if (s) {
                        windowStyles.marginRight = s;
                    }
                }
            }
            if (mfp.fixedContentPos) {
                if (!mfp.isIE7) {
                    windowStyles.overflow = 'hidden';
                } else {
                    $('body, html').css('overflow', 'hidden');
                }
            }
            var classesToadd = mfp.st.mainClass;
            if (mfp.isIE7) {
                classesToadd += ' mfp-ie7';
            }
            if (classesToadd) {
                mfp._addClassToMFP(classesToadd);
            }
            mfp.updateItemHTML();
            _mfpTrigger('BuildControls');
            $('html').css(windowStyles);
            mfp.bgOverlay.add(mfp.wrap).prependTo(document.body);
            mfp._lastFocusedEl = document.activeElement;
            setTimeout(function () {
                if (mfp.content) {
                    mfp._addClassToMFP(READY_CLASS);
                    _setFocus();
                } else {
                    mfp.bgOverlay.addClass(READY_CLASS);
                }
                _document.on('focusin' + EVENT_NS, function (e) {
                    if (e.target !== mfp.wrap[0] && !$.contains(mfp.wrap[0], e.target)) {
                        _setFocus();
                        return false;
                    }
                });
            }, 16);
            mfp.isOpen = true;
            mfp.updateSize(windowHeight);
            _mfpTrigger(OPEN_EVENT);
            return data;
        },
        close: function () {
            if (!mfp.isOpen)
                return;
            _mfpTrigger(BEFORE_CLOSE_EVENT);
            mfp.isOpen = false;
            if (mfp.st.removalDelay && !mfp.isLowIE && mfp.supportsTransition) {
                mfp._addClassToMFP(REMOVING_CLASS);
                setTimeout(function () {
                    mfp._close();
                }, mfp.st.removalDelay);
            } else {
                mfp._close();
            }
        },
        _close: function () {
            _mfpTrigger(CLOSE_EVENT);
            var classesToRemove = REMOVING_CLASS + ' ' + READY_CLASS + ' ';
            mfp.bgOverlay.detach();
            mfp.wrap.detach();
            mfp.container.empty();
            if (mfp.st.mainClass) {
                classesToRemove += mfp.st.mainClass + ' ';
            }
            mfp._removeClassFromMFP(classesToRemove);
            if (mfp.fixedContentPos) {
                var windowStyles = { marginRight: '' };
                if (mfp.isIE7) {
                    $('body, html').css('overflow', '');
                } else {
                    windowStyles.overflow = '';
                }
                $('html').css(windowStyles);
            }
            _document.off('keyup' + EVENT_NS + ' focusin' + EVENT_NS);
            mfp.ev.off(EVENT_NS);
            mfp.wrap.attr('class', 'mfp-wrap').removeAttr('style');
            mfp.bgOverlay.attr('class', 'mfp-bg');
            mfp.container.attr('class', 'mfp-container');
            if (mfp.st.showCloseBtn && (!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
                if (mfp.currTemplate.closeBtn)
                    mfp.currTemplate.closeBtn.detach();
            }
            if (mfp._lastFocusedEl) {
                $(mfp._lastFocusedEl).focus();
            }
            mfp.currItem = null;
            mfp.content = null;
            mfp.currTemplate = null;
            mfp.prevHeight = 0;
            _mfpTrigger(AFTER_CLOSE_EVENT);
        },
        updateSize: function (winHeight) {
            if (mfp.isIOS) {
                var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
                var height = window.innerHeight * zoomLevel;
                mfp.wrap.css('height', height);
                mfp.wH = height;
            } else {
                mfp.wH = winHeight || _window.height();
            }
            if (!mfp.fixedContentPos) {
                mfp.wrap.css('height', mfp.wH);
            }
            _mfpTrigger('Resize');
        },
        updateItemHTML: function () {
            var item = mfp.items[mfp.index];
            mfp.contentContainer.detach();
            if (mfp.content)
                mfp.content.detach();
            if (!item.parsed) {
                item = mfp.parseEl(mfp.index);
            }
            var type = item.type;
            _mfpTrigger('BeforeChange', [
                mfp.currItem ? mfp.currItem.type : '',
                type
            ]);
            mfp.currItem = item;
            if (!mfp.currTemplate[type]) {
                var markup = mfp.st[type] ? mfp.st[type].markup : false;
                _mfpTrigger('FirstMarkupParse', markup);
                if (markup) {
                    mfp.currTemplate[type] = $(markup);
                } else {
                    mfp.currTemplate[type] = true;
                }
            }
            if (_prevContentType && _prevContentType !== item.type) {
                mfp.container.removeClass('mfp-' + _prevContentType + '-holder');
            }
            var newContent = mfp['get' + type.charAt(0).toUpperCase() + type.slice(1)](item, mfp.currTemplate[type]);
            mfp.appendContent(newContent, type);
            item.preloaded = true;
            _mfpTrigger(CHANGE_EVENT, item);
            _prevContentType = item.type;
            mfp.container.prepend(mfp.contentContainer);
            _mfpTrigger('AfterChange');
        },
        appendContent: function (newContent, type) {
            mfp.content = newContent;
            if (newContent) {
                if (mfp.st.showCloseBtn && mfp.st.closeBtnInside && mfp.currTemplate[type] === true) {
                    if (!mfp.content.find('.mfp-close').length) {
                        mfp.content.append(_getCloseBtn());
                    }
                } else {
                    mfp.content = newContent;
                }
            } else {
                mfp.content = '';
            }
            _mfpTrigger(BEFORE_APPEND_EVENT);
            mfp.container.addClass('mfp-' + type + '-holder');
            mfp.contentContainer.append(mfp.content);
        },
        parseEl: function (index) {
            var item = mfp.items[index], type = item.type;
            if (item.tagName) {
                item = { el: $(item) };
            } else {
                item = {
                    data: item,
                    src: item.src
                };
            }
            if (item.el) {
                var types = mfp.types;
                for (var i = 0; i < types.length; i++) {
                    if (window.CP.shouldStopExecution(4)) {
                        break;
                    }
                    if (item.el.hasClass('mfp-' + types[i])) {
                        type = types[i];
                        break;
                    }
                }
                window.CP.exitedLoop(4);
                item.src = item.el.attr('data-mfp-src');
                if (!item.src) {
                    item.src = item.el.attr('href');
                }
            }
            item.type = type || mfp.st.type || 'inline';
            item.index = index;
            item.parsed = true;
            mfp.items[index] = item;
            _mfpTrigger('ElementParse', item);
            return mfp.items[index];
        },
        addGroup: function (el, options) {
            var eHandler = function (e) {
                e.mfpEl = this;
                mfp._openClick(e, el, options);
            };
            if (!options) {
                options = {};
            }
            var eName = 'click.magnificPopup';
            options.mainEl = el;
            if (options.items) {
                options.isObj = true;
                el.off(eName).on(eName, eHandler);
            } else {
                options.isObj = false;
                if (options.delegate) {
                    el.off(eName).on(eName, options.delegate, eHandler);
                } else {
                    options.items = el;
                    el.off(eName).on(eName, eHandler);
                }
            }
        },
        _openClick: function (e, el, options) {
            var midClick = options.midClick !== undefined ? options.midClick : $.magnificPopup.defaults.midClick;
            if (!midClick && (e.which === 2 || e.ctrlKey || e.metaKey)) {
                return;
            }
            var disableOn = options.disableOn !== undefined ? options.disableOn : $.magnificPopup.defaults.disableOn;
            if (disableOn) {
                if ($.isFunction(disableOn)) {
                    if (!disableOn.call(mfp)) {
                        return true;
                    }
                } else {
                    if (_window.width() < disableOn) {
                        return true;
                    }
                }
            }
            if (e.type) {
                e.preventDefault();
                if (mfp.isOpen) {
                    e.stopPropagation();
                }
            }
            options.el = $(e.mfpEl);
            if (options.delegate) {
                options.items = el.find(options.delegate);
            }
            mfp.open(options);
        },
        updateStatus: function (status, text) {
            if (mfp.preloader) {
                if (_prevStatus !== status) {
                    mfp.container.removeClass('mfp-s-' + _prevStatus);
                }
                if (!text && status === 'loading') {
                    text = mfp.st.tLoading;
                }
                var data = {
                    status: status,
                    text: text
                };
                _mfpTrigger('UpdateStatus', data);
                status = data.status;
                text = data.text;
                mfp.preloader.html(text);
                mfp.preloader.find('a').on('click', function (e) {
                    e.stopImmediatePropagation();
                });
                mfp.container.addClass('mfp-s-' + status);
                _prevStatus = status;
            }
        },
        _checkIfClose: function (target) {
            if ($(target).hasClass(PREVENT_CLOSE_CLASS)) {
                return;
            }
            var closeOnContent = mfp.st.closeOnContentClick;
            var closeOnBg = mfp.st.closeOnBgClick;
            if (closeOnContent && closeOnBg) {
                return true;
            } else {
                if (!mfp.content || $(target).hasClass('mfp-close') || mfp.preloader && target === mfp.preloader[0]) {
                    return true;
                }
                if (target !== mfp.content[0] && !$.contains(mfp.content[0], target)) {
                    if (closeOnBg) {
                        if ($.contains(document, target)) {
                            return true;
                        }
                    }
                } else if (closeOnContent) {
                    return true;
                }
            }
            return false;
        },
        _addClassToMFP: function (cName) {
            mfp.bgOverlay.addClass(cName);
            mfp.wrap.addClass(cName);
        },
        _removeClassFromMFP: function (cName) {
            this.bgOverlay.removeClass(cName);
            mfp.wrap.removeClass(cName);
        },
        _hasScrollBar: function (winHeight) {
            return (mfp.isIE7 ? _document.height() : document.body.scrollHeight) > (winHeight || _window.height());
        },
        _parseMarkup: function (template, values, item) {
            var arr;
            if (item.data) {
                values = $.extend(item.data, values);
            }
            _mfpTrigger(MARKUP_PARSE_EVENT, [
                template,
                values,
                item
            ]);
            $.each(values, function (key, value) {
                if (value === undefined || value === false) {
                    return true;
                }
                arr = key.split('_');
                if (arr.length > 1) {
                    var el = template.find(EVENT_NS + '-' + arr[0]);
                    if (el.length > 0) {
                        var attr = arr[1];
                        if (attr === 'replaceWith') {
                            if (el[0] !== value[0]) {
                                el.replaceWith(value);
                            }
                        } else if (attr === 'img') {
                            if (el.is('img')) {
                                el.attr('src', value);
                            } else {
                                el.replaceWith('<img src="' + value + '" class="' + el.attr('class') + '" />');
                            }
                        } else {
                            el.attr(arr[1], value);
                        }
                    }
                } else {
                    template.find(EVENT_NS + '-' + key).html(value);
                }
            });
        },
        _getScrollbarSize: function () {
            if (mfp.scrollbarSize === undefined) {
                var scrollDiv = document.createElement('div');
                scrollDiv.id = 'mfp-sbm';
                scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
                document.body.appendChild(scrollDiv);
                mfp.scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
                document.body.removeChild(scrollDiv);
            }
            return mfp.scrollbarSize;
        }
    };
    $.magnificPopup = {
        instance: null,
        proto: MagnificPopup.prototype,
        modules: [],
        open: function (options, index) {
            _checkInstance();
            if (!options) {
                options = {};
            } else {
                options = $.extend(true, {}, options);
            }
            options.isObj = true;
            options.index = index || 0;
            return this.instance.open(options);
        },
        close: function () {
            return $.magnificPopup.instance && $.magnificPopup.instance.close();
        },
        registerModule: function (name, module) {
            if (module.options) {
                $.magnificPopup.defaults[name] = module.options;
            }
            $.extend(this.proto, module.proto);
            this.modules.push(name);
        },
        defaults: {
            disableOn: 0,
            key: null,
            midClick: false,
            mainClass: '',
            preloader: true,
            focus: '',
            closeOnContentClick: false,
            closeOnBgClick: true,
            closeBtnInside: true,
            showCloseBtn: true,
            enableEscapeKey: true,
            modal: false,
            alignTop: false,
            removalDelay: 0,
            fixedContentPos: 'auto',
            fixedBgPos: 'auto',
            overflowY: 'auto',
            closeMarkup: '<button title="%title%" type="button" class="mfp-close">&times;</button>',
            tClose: 'Close (Esc)',
            tLoading: 'Loading...'
        }
    };
    $.fn.magnificPopup = function (options) {
        _checkInstance();
        var jqEl = $(this);
        if (typeof options === 'string') {
            if (options === 'open') {
                var items, itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup, index = parseInt(arguments[1], 10) || 0;
                if (itemOpts.items) {
                    items = itemOpts.items[index];
                } else {
                    items = jqEl;
                    if (itemOpts.delegate) {
                        items = items.find(itemOpts.delegate);
                    }
                    items = items.eq(index);
                }
                mfp._openClick({ mfpEl: items }, jqEl, itemOpts);
            } else {
                if (mfp.isOpen)
                    mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
            }
        } else {
            options = $.extend(true, {}, options);
            if (_isJQ) {
                jqEl.data('magnificPopup', options);
            } else {
                jqEl[0].magnificPopup = options;
            }
            mfp.addGroup(jqEl, options);
        }
        return jqEl;
    };
    var INLINE_NS = 'inline', _hiddenClass, _inlinePlaceholder, _lastInlineElement, _putInlineElementsBack = function () {
            if (_lastInlineElement) {
                _inlinePlaceholder.after(_lastInlineElement.addClass(_hiddenClass)).detach();
                _lastInlineElement = null;
            }
        };
    $.magnificPopup.registerModule(INLINE_NS, {
        options: {
            hiddenClass: 'hide',
            markup: '',
            tNotFound: 'Content not found'
        },
        proto: {
            initInline: function () {
                mfp.types.push(INLINE_NS);
                _mfpOn(CLOSE_EVENT + '.' + INLINE_NS, function () {
                    _putInlineElementsBack();
                });
            },
            getInline: function (item, template) {
                _putInlineElementsBack();
                if (item.src) {
                    var inlineSt = mfp.st.inline, el = $(item.src);
                    if (el.length) {
                        var parent = el[0].parentNode;
                        if (parent && parent.tagName) {
                            if (!_inlinePlaceholder) {
                                _hiddenClass = inlineSt.hiddenClass;
                                _inlinePlaceholder = _getEl(_hiddenClass);
                                _hiddenClass = 'mfp-' + _hiddenClass;
                            }
                            _lastInlineElement = el.after(_inlinePlaceholder).detach().removeClass(_hiddenClass);
                        }
                        mfp.updateStatus('ready');
                    } else {
                        mfp.updateStatus('error', inlineSt.tNotFound);
                        el = $('<div>');
                    }
                    item.inlineElement = el;
                    return el;
                }
                mfp.updateStatus('ready');
                mfp._parseMarkup(template, {}, item);
                return template;
            }
        }
    });
    var hasMozTransform, getHasMozTransform = function () {
            if (hasMozTransform === undefined) {
                hasMozTransform = document.createElement('p').style.MozTransform !== undefined;
            }
            return hasMozTransform;
        };
    $.magnificPopup.registerModule('zoom', {
        options: {
            enabled: false,
            easing: 'ease-in-out',
            duration: 300,
            opener: function (element) {
                return element.is('img') ? element : element.find('img');
            }
        },
        proto: {
            initZoom: function () {
                var zoomSt = mfp.st.zoom, ns = '.zoom', image;
                if (!zoomSt.enabled || !mfp.supportsTransition) {
                    return;
                }
                var duration = zoomSt.duration, getElToAnimate = function (image) {
                        var newImg = image.clone().removeAttr('style').removeAttr('class').addClass('mfp-animated-image'), transition = 'all ' + zoomSt.duration / 1000 + 's ' + zoomSt.easing, cssObj = {
                                position: 'fixed',
                                zIndex: 9999,
                                left: 0,
                                top: 0,
                                '-webkit-backface-visibility': 'hidden'
                            }, t = 'transition';
                        cssObj['-webkit-' + t] = cssObj['-moz-' + t] = cssObj['-o-' + t] = cssObj[t] = transition;
                        newImg.css(cssObj);
                        return newImg;
                    }, showMainContent = function () {
                        mfp.content.css('visibility', 'visible');
                    }, openTimeout, animatedImg;
                _mfpOn('BuildControls' + ns, function () {
                    if (mfp._allowZoom()) {
                        clearTimeout(openTimeout);
                        mfp.content.css('visibility', 'hidden');
                        image = mfp._getItemToZoom();
                        if (!image) {
                            showMainContent();
                            return;
                        }
                        animatedImg = getElToAnimate(image);
                        animatedImg.css(mfp._getOffset());
                        mfp.wrap.append(animatedImg);
                        openTimeout = setTimeout(function () {
                            animatedImg.css(mfp._getOffset(true));
                            openTimeout = setTimeout(function () {
                                showMainContent();
                                setTimeout(function () {
                                    animatedImg.remove();
                                    image = animatedImg = null;
                                    _mfpTrigger('ZoomAnimationEnded');
                                }, 16);
                            }, duration);
                        }, 16);
                    }
                });
                _mfpOn(BEFORE_CLOSE_EVENT + ns, function () {
                    if (mfp._allowZoom()) {
                        clearTimeout(openTimeout);
                        mfp.st.removalDelay = duration;
                        if (!image) {
                            image = mfp._getItemToZoom();
                            if (!image) {
                                return;
                            }
                            animatedImg = getElToAnimate(image);
                        }
                        animatedImg.css(mfp._getOffset(true));
                        mfp.wrap.append(animatedImg);
                        mfp.content.css('visibility', 'hidden');
                        setTimeout(function () {
                            animatedImg.css(mfp._getOffset());
                        }, 16);
                    }
                });
                _mfpOn(CLOSE_EVENT + ns, function () {
                    if (mfp._allowZoom()) {
                        showMainContent();
                        if (animatedImg) {
                            animatedImg.remove();
                        }
                        image = null;
                    }
                });
            },
            _allowZoom: function () {
                return mfp.currItem.type === 'image';
            },
            _getItemToZoom: function () {
                if (mfp.currItem.hasSize) {
                    return mfp.currItem.img;
                } else {
                    return false;
                }
            },
            _getOffset: function (isLarge) {
                var el;
                if (isLarge) {
                    el = mfp.currItem.img;
                } else {
                    el = mfp.st.zoom.opener(mfp.currItem.el || mfp.currItem);
                }
                var offset = el.offset();
                var paddingTop = parseInt(el.css('padding-top'), 10);
                var paddingBottom = parseInt(el.css('padding-bottom'), 10);
                offset.top -= $(window).scrollTop() - paddingTop;
                var obj = {
                    width: el.width(),
                    height: (_isJQ ? el.innerHeight() : el[0].offsetHeight) - paddingBottom - paddingTop
                };
                if (getHasMozTransform()) {
                    obj['-moz-transform'] = obj['transform'] = 'translate(' + offset.left + 'px,' + offset.top + 'px)';
                } else {
                    obj.left = offset.left;
                    obj.top = offset.top;
                }
                return obj;
            }
        }
    });
}(window.jQuery || window.Zepto));
$('.open-popup-link').magnificPopup({
    type: 'inline',
    midClick: true,
    removalDelay: 300,
    mainClass: 'mfp-fade'
});
</script>

Audio Code by. Dudley Storey
Bag Of Crisps Code by. Impshum
Design Code is Edited by. M-2010 on Codepen

DEMOSHOW

* If you want to directly copy  and  paste you canDownload Here Bag Of Crisps

Category: Memasang Kode Bag Of Crisps

Profile Card

Css3 Card Design

CSS flat folded corner

Card UI Design

FnF.fm Audio Player

Memasang Kode Bag Of Crisps

POPULAR

Blog Archive