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
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
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">×</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
Bag Of Crisps Code by. Impshum
Design Code is Edited by. M-2010 on Codepen
* If you want to directly copy and paste you canDownload Here Bag Of Crisps
