Menu


Menu Tab

Pages

Dark UI Elements

Memasang kode Dark UI Elements 
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat 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  :  
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
/*Dark Ui elements */

@import url("http://fonts.googleapis.com/css?family=Lobster");
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot");
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {#);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  padding: 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBQiRS9V6581fHrVfGb-ApF9Lt6utiXjcaosk6_BpT7SdE-G46BYCDYiqiQhYRV8zHCjF9aXrkrVMq_EMtwSusCfmy8L0WzeTZy3dhJO8cpSnFgyTU8KaYtMW_ExGA0x3P_nmy_QLJvgR/s1600-r/bg-mys2010.jpg") repeat;
  padding: 10px;
}

a, input[type='radio'] + label {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

fieldset {
  border: 1px solid #2223;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 20px 0 0 0;
  min-height: 90px;
  line-height: 90px;
  position: relative;
  float: left;
  margin-right: 20px;
  padding: 20px;
}


input[type='radio'] {
  display: none;
}

/* -------------------
    Default State
-------------------- */
a.glowBtn, input[type='radio'] + label {
  z-index: 10;
  margin: 0 10px 10px 0;
  width: 115.5px;
  height: 37.29px;
  line-height: 36.3px;
  position: relative;
  font-size: 13.2px;
  letter-spacing: .1em;
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(#111111, #000000);
  background-image: -webkit-linear-gradient(#111111, #000000);
  background-image: linear-gradient(#111111, #000000);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
}

a.glowBtn:after, input[type='radio'] + label:after {
  z-index: -1;
  content: '';
  cursor: pointer;
  top: 1.98px;
  margin-left: 50%;
  left: -55px;
  width: 110px;
  height: 33px;
  display: block;
  position: absolute;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #444444), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#444444, #373738);
  background-image: -webkit-linear-gradient(#444444, #373738);
  background-image: linear-gradient(#444444, #373738);
  -moz-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

/* -------------------
    Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='radio'] + label:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

a.glowBtn:hover:after, a.hover:after, input[type='radio'] + label:hover:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

/* -------------------
    Active States
-------------------- */
a.glowBtn:active, a.active, a.active:hover, input[type='radio']:checked + label {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  -moz-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
}

a.glowBtn:active, a.active, a.active:hover {
  text-shadow: 0 -1px 0 black, 0 0px 30px cyan, 0 0px 50px cyan;
}

a.glowBtn:active:after, a.active:after, a.active:hover:after, input[type='radio']:checked + label:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262627), color-stop(100%, #2d2d2e));
  background-image: -moz-linear-gradient(#262627, #2d2d2e);
  background-image: -webkit-linear-gradient(#262627, #2d2d2e);
  background-image: linear-gradient(#262627, #2d2d2e);
  -moz-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* -------------------
    Radio Specific Style
-------------------- */
input[type='radio'] + label {
  font-family: 'ModernPictogramsNormal', Arial, sans-serif;
  font-size: 36.66667px;
  line-height: 55px;
  letter-spacing: 0;
  width: 55px;
  height: 55px;
}

input[type='radio'] + label:after {
  top: 2.64px;
  left: -25px;
  width: 50px;
  height: 50px;
}

/* -------------------
    SuperBtn
-------------------- */
a.superBtn {
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  letter-spacing: .08em;
  width: 242px;
  height: 39.6px;
  line-height: 39.6px;
  position: relative;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzUzNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyNDc0OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2e3537), color-stop(100%, #424748));
  background-image: -moz-linear-gradient(#2e3537, #424748);
  background-image: -webkit-linear-gradient(#2e3537, #424748);
  background-image: linear-gradient(#2e3537, #424748);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
}

a.superBtn:after {
  width: 253px;
  height: 49.5px;
  top: -4.95px;
  margin-left: 50%;
  left: -126.5px;
  content: '';
  display: block;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhZjFmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE3YjJlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2af1fc), color-stop(100%, #17b2e6));
  background-image: -moz-linear-gradient(#2af1fc, #17b2e6);
  background-image: -webkit-linear-gradient(#2af1fc, #17b2e6);
  background-image: linear-gradient(#2af1fc, #17b2e6);
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: -1;
}

/* -------------------
    SuperBtn Hover
-------------------- */
a.superBtn:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

a.superBtn:hover:after {
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
}

a.superBtn:active {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  background: #333;
  -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* HIDE */
body {#);color:red;height:100%;overflow:hidden;}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #dad;
}


/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 11px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}
/* GRADIEND END */
<fieldset>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010"><span style="color: red; font-size: 10pt;">M-2010
</span></a><span style="color: red; font-size: 10pt;"><a class="glowBtn" href="http://Link Title/" target="_blank" title="M-Hover"><span style="color: red; font-size: 10pt;">M-HOVER</span></a>
<a class="glowBtn active" href="http://Link Demoshow " title="Dark UI Elements"><span style="color: magenta; font-size: 10pt;">SLIDE AUTO
</span></a><span style="color: magenta; font-size: 10pt;"><a class="glowBtn active" href="http://Link Download" title="Download Slide  "><span style="color: magenta; font-size: 10pt;">DOWNLOAD  </span></a>
<a class="glowBtn active" href="http://Link Demoshow" title="Slider UI Elements">SLIDE AUTO
</a><a class="glowBtn active" href="http://Link Download" title="Download Slide 2">DOWNLOAD</a>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010">GITHUB
</a><a class="glowBtn" href="http://Link Title" target="_blank" title="M-Hover">CODEPEN</a>
</span></span></fieldset>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Title" target="_blank" title="Animated Cube">
Your Title </a>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: green; font-family: Agency FB; font-size: x-small;"> <a href="http://Link Title" target="_blank" title="Dark UI Elements">Your Title </a>
</span></div>
</div>
</header></div>
</div>
Penjelasan : Edit Code yang diberi warna
Edited by. Mys2010 on Codepen
Sources by. Pfalzgraf Gyula on Codepen
DEMOSHOW Cube Slider

DEMOSHOW Dark UI Elements

Mylogo Screensaver

Memasang kode Screensaver 
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat 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
 margin: 0;
}

img, div {
  width: 100px;
  height: 100px;
}

.x {
  -webkit-animation: x 13s linear infinite alternate;
          animation: x 13s linear infinite alternate;
}

.y {
  -webkit-animation: y 7s linear infinite alternate;
          animation: y 7s linear infinite alternate;
}

@-webkit-keyframes x {
  100% {
    -webkit-transform: translateX(calc(100vw - 100px));
            transform: translateX(calc(100vw - 100px));
  }
}

@keyframes x {
  100% {
    -webkit-transform: translateX(calc(100vw - 100px));
            transform: translateX(calc(100vw - 100px));
  }
}
@-webkit-keyframes y {
  100% {
    -webkit-transform: translateY(calc(100vh - 100px));
            transform: translateY(calc(100vh - 100px));
  }
}
@keyframes y {
  100% {
    -webkit-transform: translateY(calc(100vh - 100px));
            transform: translateY(calc(100vh - 100px));
  }
}
/* END */
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50vEW7RSipaQVVc5RnjZfEJqvckWyiuLxoKIvoN1pfPhb4hny1qHtY4sOdOx0X3HMm3py0BjZQj2Yz8LfYhfO300TiRMAeVHxe_XvCWBaa_WjPJZ9gmvo2XomwuQKW3D0syQ-HZ0I_VkN/s1600-r/tr-mys2010.jpg);color:red;height:100%;overflow:hidden;}
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: 0;
  width: 100%;
  background: #FF0000;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
<div class="x">
<img class="y" expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5vtqjDrhMPWjlo-QxCzo1fAcFXOvPS-XA2gEgTHVhIcAXGke4D6ONwVtZapsIdCt0_UKNBfaYzlLj3XemUi3zQWam1_5L7BnV-LYXbgynVQ1XCYR8vDwaZkq5Y-Tr2fFY-37tL6kJiA0/s1600-r/Logo-mys2010.png " width="50" height="50">
</div>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</div>

</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ewoUBh9QCoMmLWLIGJ77Wr_kqDLzceC0qZjaIfgDWijEc11AFzwUqPIGcD0R9VoFJWJ8vgrDZ9tfKmKF8wgb5uU6FkKuN64QNvurwb0oJ7rI_0NnR9koQQ2aCNALvWvEelqh3t_aCFCP/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>
Explanation:
If you want this code, please download or copy and paste
Edited by. Mys2010 on Codepen
Sources by. Scott Kellum on Codepen

Television

Memasang kode Television
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat 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 {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50vEW7RSipaQVVc5RnjZfEJqvckWyiuLxoKIvoN1pfPhb4hny1qHtY4sOdOx0X3HMm3py0BjZQj2Yz8LfYhfO300TiRMAeVHxe_XvCWBaa_WjPJZ9gmvo2XomwuQKW3D0syQ-HZ0I_VkN/s1600-r/tr-mys2010.jpg);color:red;height:100%;overflow:hidden;}
.screen {
    position: relative;
    border-radius: 5px;
    margin: 20px auto 0 auto;
    width: 30%;
    padding: 1.5% 1.5% 3%;
    background: #111;
}

 
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: 0;
  width: 100%;
  background: #FF0000;
  border-bottom: 3px solid #dad;
}


/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
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;
color: #333;
background: #B20000 ;
border-top: 2px solid #f0f;
z-index: 9999;
}
.screen:after {
    content: "";
    position: absolute;
    left: 6%;
    background: -moz-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    background: -webkit-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    background: linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    border-radius: 10px;
    width: 88%;
    height: 50%;
    top: 8%;
}

.button {
  background: red;
    border-radius: 55% 55% 55% 55%;
    bottom: 3%;
    cursor: pointer;
    height: 5%;
    opacity: 0.85;
    position: absolute;
    right: 4%;
    width: 5%;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.75);
    transition: background .5s;
}
.screenOff .button{
    background: lightgrey;
}
.button:hover {
    opacity: 1;
}
canvas {
    border-radius: 5px;
    width: 100%;
    display: block;
    transition: box-shadow .25s;
  box-shadow: 0 10px 20px rgba(255,255,255,.25);
}
.screenOff canvas{
    box-shadow: 0 5px 10px rgba(255,255,255,.15);
}
.footer {
    position: absolute;
    height: 6%;
    width: 91%;
    background: black;
    bottom: -6%;
    box-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.message {
  display:none;
    background: white;
    border-radius: 5px;
    font-size: 20px;
    height: 25px;
    left: 50%;
    margin-left: -60px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100px;
    opacity: 0;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
}
.message:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 45px;
    left: 20%;
    margin-left: -10px;
}
<div class="screen">
<canvas id="canvas"> </canvas>
<font size="1" color="red"face="arial">
<a href="https://sites.google.com/site/fileblogfor/code/television-mys2010.css" target="_blank" title="Download">Download</a>
<div class="button" id="btn">
</div>
<div class="footer">
</div>

<div class="message" id="msg">
</div>
</div>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</a></b>
</div>
</div>

</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ewoUBh9QCoMmLWLIGJ77Wr_kqDLzceC0qZjaIfgDWijEc11AFzwUqPIGcD0R9VoFJWJ8vgrDZ9tfKmKF8wgb5uU6FkKuN64QNvurwb0oJ7rI_0NnR9koQQ2aCNALvWvEelqh3t_aCFCP/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>
<script>
      var Application = ( function() {
    var canvas;
    var ctx;
      var imgData;
        var pix;
        var WIDTH;
        var HEIGHT;
        var flickerInterval;
        var switchTimeout;
        var isOn;
        var self;
        var btnElm;

        var init = function() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = WIDTH =  450;
            canvas.height = HEIGHT =  300;
            isOn = true;
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
            ctx.fill();
            imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
            pix = imgData.data;
            flickerInterval = setInterval(flickering, 50);
            btnElm = document.getElementById('btn');
            btnElm.addEventListener('click', toggleScreen, false);
        };

        var flickering = function() {
            for (var i = 0; i < pix.length; i += 4) {
                var color = (Math.random() * 255) + 50;
                pix[i] = color;
                pix[i + 1] = color;
                pix[i + 2] = color;
            }
            ctx.putImageData(imgData, 0, 0);
        };
 
        var toggleScreen = function() {
            var msg = document.getElementById('msg');
            msg.style.opacity = 0;
      msg.style.display = 'block';
    
            if ( typeof switchTimeout != 'undefined') {
                clearTimeout(switchTimeout);
            }
            if (isOn) {
                clearInterval(flickerInterval);
                document.body.classList.add('screenOff');
                ctx.fillStyle = '#222';
                ctx.fillRect(0, 0, WIDTH, HEIGHT);
                ctx.fill();
                msg.innerHTML = 'No Signal!';
            } else {
        document.body.classList.remove('screenOff');
                flickerInterval = setInterval(flickering, 50);
                msg.innerHTML = 'Error';
            }
            msg.style.opacity = 1;
            switchTimeout = window.setTimeout(function() {
                msg.style.opacity = 0;
            }, 2750);
            isOn = !isOn;
        };
        return {
            init : init
        };
    }());
Application.init();  
    </script>
Explanation:
If you want this code, please download or copy and paste
Edited by. Mys2010 on Codepen
Sources by. Moklick on Codepen

Dark Forest

Memasang kode Dark Forest
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat 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
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoB3foG-tF_vQBnul3AgwB8EjTort8EpNKoWdV632z91cyApz9vdgwgdvtRXBq9gDO71PsNE4WDi7WiVRbhZrgZPeby_8udErIs1oNXyV3v7dEOtxEsrsvE06YoY4NVxOhWLdgrOTGJGA/s1600-r/Cibeber-Cimahi-mys2010.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 50px;
  height: 1.4em;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  color: rgba(255, 255, 255, 0.55);
  font-family: agency fb, helvetica neue, sans serif;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .35em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: opacity infinite 12s;
          animation: opacity infinite 12s;
}
h1 span {
  display: block;
  position: absolute;
  top: 0;
}
h1 span:nth-child(1) {
  right: 100%;
  margin-right: -.4em;
}
h1 span:nth-child(2) {
  left: 100%;
}
h1::before, h1::after {
  display: block;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.55);
  content: '';
}
h1::before {
  left: 18px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}
h1::after {
  right: 18px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
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: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #333;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid  #333;
z-index: 9999;
<h1>
<span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> Mys2010</a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effect">Effect</a></span></h1>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="https://sites.google.com/site/fileblogfor/code/DarkForest-mys2010.css"title="DARK FOREST"><b>DOWNLOAD</b></a>
</div>
</div>

</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ewoUBh9QCoMmLWLIGJ77Wr_kqDLzceC0qZjaIfgDWijEc11AFzwUqPIGcD0R9VoFJWJ8vgrDZ9tfKmKF8wgb5uU6FkKuN64QNvurwb0oJ7rI_0NnR9koQQ2aCNALvWvEelqh3t_aCFCP/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a></div>
Explanation:
If you want this code, please download or copy and paste
Edited by. Mys2010 on Codepen
Sources by. Michiel Bijl on Codepen

Memasang Kode Teks Gaya Koran

Memasang kode Teks Gaya Koran
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog barubuat 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 type="text/css"> 
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjN9OE4kOI7tGMFwWaS34Krv95CdTn21puAHet25eWJHI3rAJd1FpewZTDtG_Eg5cJ2mbVyTSkhWmFEHLWfiza_9gFGIuafAtbmMQzfbALQx6xaUML-RMD8FTxjV4JSsTArgQEbClHYt93/s1600-r/koran-mys2010.png);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 13px;
 }
 
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: 0;
  width: 100%;
  background: #F5F5F5;
  border-bottom: 3px solid #dad;
}

.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #F5F5F5;
border-top: 2px solid #f0f;
z-index: 9999;
}
 .koran{
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
    column-count:4;
    -moz-column-gap:100px; /* Firefox */
    -webkit-column-gap:100px; /* Safari and Chrome */
    column-gap:100px;
    -moz-column-rule-style:outset; /* Firefox */
    -webkit-column-rule-style:outset; /* Safari and Chrome */
    column-rule-style:outset;
    -moz-column-rule-color:#ff0000; /* Firefox */
    -webkit-column-rule-color:#ff0000; /* Safari and Chrome */
    column-rule-color:#ff0000;}
    </style>
<div class="koran">
 Your text here
    </div>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><b>SEARCH ENGINE OPTIMIZATION</b></span></div>
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<code></code>
<span style="color: green; font-family: &quot;agency fb&quot;; font-size: 13;">Copyright2016 Cibeber Cimahi</span></div>
</div>
Penjelasan :
Edit Jumlah kolom, Ganti background gambar, teks dan kode warna sesuai keinginan
Sources by. Allsources
Edited by. Mys2010 on Codepen

My Logo 2

html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
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: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #333;
}

/*Bg Animated*/

html,
body{
      background: #444;    
 }
i {
  -webkit-animation: bounce 1.125s ease-in-out infinite alternate;
          animation: bounce 1.125s ease-in-out infinite alternate;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
          transform: translate3d(0, 0, 0) scale(1);
  text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  font-family: "Product Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 20vmin;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
i:nth-child(1) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  color: #4285f4;
}
i:nth-child(2) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  color: #ea4335;
}
i:nth-child(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  color: #fbbc05;
}
i:nth-child(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  color: #4285f4;
}
i:nth-child(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  color: #34a853;
}
i:nth-child(6) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  color: #ea4335;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

/* LOGO*/

 background:#000;
}
#logo:active {
    position: relative;
    top: 1px;
}
 html {
    height: 10;
    background-color: #fff;
    background-image: linear-gradient
(135deg,#00BFFF, #00BFFF, #8A2BE2, #9932CC ,#9ACD32);
}
<div>
<p align="center">
<i>M</i><i>Y</i><i>S</i><i>2</i><i>0</i><i>1</i><i>0</i>
</div>
<p align="center">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/02/logo-mys2010.html">
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png"
name="e902" border="0" width="300" height="200" /></a>
<font size="2" color=" green "face="Time newroman">CIBEBER CIMAHI</font>
</center>
<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://demoshow-mys2010.blogspot.co.id/2015/12/
belajar-mp3-dengan-auto-slide.html" title="Myscript2010">
WEB DESIGN MYSCRIPT2010 ANIMATED LOGO</a>
<font size="2" color="#dad"face="arial">* * *</a>
</header>

My Logo 1




CIBEBER CIMAHI


/* Backgroud Top Title Header */
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
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: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #333;}
/*Code Bottom*/
background: #000;
}
#logo:active {
    position: relative;
    top: 1px;
}
 html {
    height: 100%;
    background-color: #333;
    background-image: linear-gradient(135deg, #444, #333);
}
body {
    margin: 0;
}
.controls {
    width: 100%;
    border-top: 1px solid;
    position: fixed;
    bottom: 0;
    color: #afa;
}
.controls__button {
    box-sizing: border-box;
    width: 5,4em;
    border: none;
    vertical-align: middle;
    cursor: pointer;
    font-size: inherit;
    -webkit-font-smoothing: antialiased;
    line-height: 7.65em;
    color: currentcolor;
    background-color: transparent;
}
.controls__button:hover,
.controls__button:focus,
.controls__button.is-active {
    color: #222;
    background-color: #dad;
}
.controls__button:focus {
    outline: none;
}
.controls__button.is-active:hover,
.controls__button.is-active:focus {
    color: currentcolor;
    background-color: #222;
}
<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="3" color="green"face="arial">
<a href="http://demoshow-mys2010.blogspot.co.id/p/logo-mys2010.html"
title="Myscript2010">LOGO MYS2010</a>
</header>
<p align="center">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/02/logo-mys2010.html">
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png"
name="e902" border="0" width="300" height="200" /></a>
<font size="2" color=" green "face="Time newroman">CIBEBER CIMAHI</font>
</center>
<div class="controls">
<button class="controls__button"> Myscript2010</button><!--
 --><button class="controls__button">Mylogo</button><!--
 --><button class="controls__button">Call307</button>
</div>

Bag of Crisps

Memasang kode Bag of Crisps
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="Crisps-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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
   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;
}


/*   back     */

/*   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;

}

/*   /teeth     */

/*   /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="http://recycledrobot.co.uk/codepen/img/title2.png">
  </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>
<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="http://recycledrobot.co.uk/codepen/img/title2.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="http://recycledrobot.co.uk/codepen/img/title3.png">
 </div>
</div>
<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">
impshum@recycledrobot.co.uk
</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'
});
//# sourceURL=pen.js
</script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
Penjelasan :
Ganti Link Gambar sesuai kinginan ganti link title sesuai fungsi
Edited by. Myscript2010
Sources by. Impshum on Codepen

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi