Create a new version of paste:

<!DOCTYPE HTML>
<html>

<!--THEME 06 LA Hallucinations by hermionegrangcr (hermionejean.co.vu)
 
THEME BLOG: grangersdesigns (granger.cf)
 
 
          ♛       ♛       ♛                                
        ♛♛♛    ♛♛♛   ♛♛♛                      
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛              
         ♛♛♛  ♥ G♚D ♥ ♛♛♛  
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛                            
          ♛ ♛ ♛ ♛ ♛ ♛ ♛      © hermionegrangcr (hermionejean.co.vu)      
 
                           
                TERMS OF USE:
 
♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
 
♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
 
♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
 
♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
 
THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
 
-->


    <head>
    
    <title>{Title}</title>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<link rel="shortcut icon" href="{Favicon}">
		
{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}

<meta name="image:profile" content="http://static.tumblr.com/f75d88f0d4ca272362db789619827992/xbvpdcx/0Avnv0mwy/tumblr_static_5z1as02ydikokggow8cg4s8w0.jpg">
<meta name="image:fullscreen bg" content="http://static.tumblr.com/a9986351fcfa95c8483ef6d67bbbdae6/xbvpdcx/Zi2ntp45i/tumblr_static_5e2qtth58jokow4wo8448cwcs.jpg">
<meta name="image:grid bg" content="https://41.media.tumblr.com/bf8dfe2e6ff97f506306344fe021504e/tumblr_ndpupoDTro1rnmh3no2_250.png">

<meta name="select:background"content="colour_bg"title="simple">
<meta name="select:background"content="gradient_bg"title="gradient">
<meta name="select:background"content="img_bg"title="fullscreen image">
<meta name="select:background"content="r_bg"title="repeated background">

<meta name="select:post width"content="post500"title="500px">
<meta name="select:post width"content="post400"title="400px">	
<meta name="select:post width"content="post250"title="250px">

<meta name="if:gradient border" content="0">
<meta name="if:crosshair hover" content="1">
<meta name="if:scroll to top button" content="0">

<meta name="color:links" content="#cdcdcd">
<meta name="color:tags" content="#cdcdcd">
<meta name="color:hover" content="#fafafa">
<meta name="color:accent" content="#000">
<meta name="color:lightbox" content="#fff">
<meta name="color:grad1" content="#fefefe">
<meta name="color:grad2" content="#ababab">
<meta name="color:title" content="#000">
<meta name="color:title hover" content="#fff">


<meta name="text:Link1" content="Link1">
<meta name="text:link1 URL" content="/">
<meta name="text:Link2" content="Link2">
<meta name="text:link2 URL" content="/">
<meta name="text:Link3" content="Link3">
<meta name="text:link3 URL" content="/">
<meta name="text:Link4" content="Link4">
<meta name="text:link4 URL" content="/">
<meta name="text:Link5" content="Link5">
<meta name="text:link5 URL" content="/">

<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,700' rel='stylesheet' type='text/css'>	
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,100' rel='stylesheet' type='text/css'>

<script src="http://tympanus.net/Development/CreativeLinkEffects/js/modernizr.custom.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
 
<!--Tooltip-->
 
<script>
 
(function($){
 
$(document).ready(function(){
 
$("a[title]").style_my_tooltips({
 
tip_follows_cursor:true,
 
tip_delay_time:30,
 
tip_fade_speed:300,
 
attribute:"title"
 
});
 
});
 
})(jQuery);
 
</script>
		
		
<style type="text/css">

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

::selection {background:#fff; color:#000000;}
::-moz-selection {background:#fff;color:#000000;}
::-webkit-selection {background:#fff;color:#000000;}
   
   
::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
 
::-webkit-scrollbar-thumb { background-color: {color:accent}; }
   
 
/*Tooltip*/
#s-m-t-tooltip{
    position:absolute;
    margin-top: 10px;
    z-index:9999999999;
    padding:5px;
    color:#fff;
    background: {color:accent};
 
}

.post500 #s-m-t-tooltip {
    font-size:12px;
}

.post400 #s-m-t-tooltip {
    font-size:10px;
}

.post250 #s-m-t-tooltip {
    font-size:9px;
    padding:3px;
}
 
body {
    font-family:'Lato',Arial, sans-serif;
    font-weight:400;
    font-size:12px;
    letter-spacing:1.5px;
    line-height:140%;
    overflow-x:hidden;
 
}

.colour_bg {
    background:#fafafa;
}

.img_bg {
    background-image: url('{image:fullscreen bg}');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-size:cover;
}

.gradient_bg {
	background: -webkit-linear-gradient(90deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */    
}

.r_bg {
    background:url('{image:grid bg}');
    background-attachment: fixed;    
}

a {
    text-decoration: none;
    color: {color:links};
    {block:ifcrosshairhover}
    cursor:crosshair;
    {/block:ifcrosshairhover}    
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

a:hover {
    color:{color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

blockquote { 
 border-left: 1px #eaeaea solid; 
 padding-left: 10px;
 margin-left: 10px; 
 max-width: 100%;
}

.post250 blockquote {width:calc(100% - 20px);}

.post400 blockquote {width:calc(100% - 30px);}

blockquote blockquote {
 padding: 0 0 0 10px;
 margin: 0 0 0 10px; 
    
}

blockquote a {
    border-bottom:1px solid #dedede;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

blockquote a:hover {
    border-bottom:1px solid {color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

/*Important*/

iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}

/*Borders*/

#border1 {
    {block:ifnotgradientborder}
    background:{color:accent};
    {/block:ifnotgradientborder}

    {block:ifgradientborder}
    background:{color:grad1};
    {/block:ifgradientborder}     
   
    width:100%;
    position:fixed;
    z-index:110;
    height:30px;
    top:0;
    left:0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

#border2 {
    {block:ifnotgradientborder}
    background:{color:accent};
    {/block:ifnotgradientborder}
 
    
    {block:ifgradientborder}
background: -webkit-linear-gradient(180deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */
    {/block:ifgradientborder}     
    height:100vh;
    position:fixed;
    z-index:100;
    width:30px;
    right:0;
    top:0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
    
}

#border3 {
    {block:ifnotgradientborder}
    background:{color:accent};
    {/block:ifnotgradientborder}

    {block:ifgradientborder}
    background:{color:grad2};
    {/block:ifgradientborder}      
    text-align:center; 
    word-spacing:20px;    
    width:100%;
    position:fixed;
    z-index:100;
    height:30px;
    bottom:0;
    left:0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

#border4 {
    {block:ifnotgradientborder}
    background:{color:accent};
    {/block:ifnotgradientborder}

{block:ifgradientborder}
background: -webkit-linear-gradient(180deg, {color:grad1}; 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(180deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */  
    {/block:ifgradientborder}    
    
    height:100vh;
    position:fixed;
    z-index:100;
    width:30px;
    left:0;
    top:0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
    
}

/*Burger Menu*/

.burger {
  position: absolute;
  z-index: 120;
  left: 8px;
  top: 10px;
  cursor: pointer;
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.burger__patty {
  width: 20px;
  height: 2px;
  margin: 0 0 4px 0;
  background: #fff;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.burger:hover .burger__patty {
    background:{color:hover};
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);    
}

   
.burger__patty:last-child {
  margin-bottom: 0;
}
.burger--close {

  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.burger--close .burger__patty {
    background:{color:accent};
}

.burger--close .burger__patty:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(4px, 4px);
      -ms-transform: rotate(45deg) translate(4px, 4px);
          transform: rotate(45deg) translate(4px, 4px);
}
.burger--close .burger__patty:nth-child(2) {
  opacity: 0;
}
.burger--close .burger__patty:nth-child(3) {
  -webkit-transform: rotate(-45deg) translate(5px, -4px);
      -ms-transform: rotate(-45deg) translate(5px, -4px);
          transform: rotate(-45deg) translate(5px, -4px);
}

/*Fullscreen menu*/

.menu {
  position: fixed;
  top: 0;
  width: 100%;
  visibility: hidden;
}
.menu--active {
  visibility: visible;
}
.menu__brand, .menu__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  float: left;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}
.menu__list {
  margin: 0;
  padding: 0;
  {block:ifgradientborder}
   background:{color:grad1};
  {/block:ifgradientborder}  
  
  {block:ifnotgradientborder}
  background: {color:accent};
  {/block:ifnotgradientborder}
  list-style-type: none;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__list--active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.menu__brand {
  background: #fff;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}
.menu__brand--active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.menu__item {
  -webkit-transform: translate3d(500px, 0, 0);
          transform: translate3d(500px, 0, 0);
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__item--active {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.menu__link {
  display: inline-block;
  position: relative;
  font-size: 30px;
  padding: 20px 0;
  font-weight: 300;
  text-transform:uppercase;
  font-family:'roboto', arial, sans-serif;
  color: white;
  text-decoration: none;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu__link:empty {visibility:hidden;}

.menu__link:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10px;
  height: 2px;
  background: white;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu__link:hover:before {
  width: 100%;
}
.menu .menu__item:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.menu .menu__item:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.menu .menu__item:nth-child(3) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.menu .menu__item:nth-child(4) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.menu .menu__item:nth-child(5) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.menu .menu__item:nth-child(6) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

/* Profile */

.menu__brand *, .menu__brand *:after, .menu__brand *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

.menu__brand figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
    width:300px;
    height:300px;
	height: auto;
	background: #000;
	text-align: center;
}

.menu__brand figure img {
	position: relative;
	display: block;
	min-height: 300px;
	max-width: 300px;
	opacity: 0.8;
}

.menu__brand figure figcaption {
	padding: 2em;
	color: #fff;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.menu__brand figure figcaption::before,
.menu__brand figure figcaption::after {
	pointer-events: none;
}

.menu__brand figure figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */


.menu__brand figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.menu__brand figure h2 span {
	font-weight: 800;
}

.menu__brand figure h2,
.menu__brand figure p {
	margin: 0;
}

.menu__brand figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

figure.effect-ming {
	background: #000;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
	margin: 20% 0 10px 0;
	opacity:0;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s; 	

}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
    opacity:1;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming a {
    border-bottom:1px solid {color:links};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

figure.effect-ming a:hover {
    border-bottom:1px solid {color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}

/*Menu media queries*/

@media screen and (max-width: 768px) {
  ul.menu__list,
  div.menu__brand {
    float: none;
    width: 100%;
    min-height: 0;
  }
  ul.menu__list--active,
  div.menu__brand--active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  .menu__list {
    height: 75vh;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  .menu__link {
    font-size: 24px;
  }

  .menu__brand {
    height: 25vh;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

}

/*header*/
#header {
    position:relative;
    margin:60px auto;
    width:500px;
    text-align:center;
}

.post500 #header {margin-top:70px;}

.post250 #header {
    width:400px;
    margin-top:70px;
    
}

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 3em;
	line-height: 1;
    text-overflow: ellipsis;    
    white-space: nowrap;
    overflow:hidden;	
	color: {color:title};
	max-width:100%;
	display: inline-block;
}

.post250 .link {
    font-size:2em;
}

/* Kukuri */
.link--kukuri {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 1;
	color: {color:title};
}

.link--kukuri:hover {
	color: {color:title hover};
}

.link--kukuri::after {
	content: '';
	position: absolute;
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #fff;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

.link--kukuri::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: {color:title hover};
	white-space: nowrap;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
	width: 100%;
}

/*tumblr controls*/

#tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop,.tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop {
    z-index:200 !important;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);  
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.tmblr-iframe--follow-teaser {z-index:101 !important;}

@media screen and (max-width: 1024px) {

#tumblr_controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop,.tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop {
    transform: scale(0.75) !important;
    -webkit-transform: scale(0.75) !important;
    -moz-transform: scale(0.75) !important;
    -o-transform: scale(0.75) !important;
    -ms-transform: scale(0.75) !important;    
    right:-45px !important;
    top:-3px !important;
    position:fixed !important;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}


}

/*Posts*/

#entries {
    position:relative;
    margin:10px auto 50px auto;
}

.posts {
    position:relative;
    margin:50px auto;
    padding:20px;
    background:#fff;
    overflow-x:hidden;

}

.posts > p a, .posts ol a, .posts ul a {
    border-bottom:1px solid #dedede;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

.posts > p a:hover,.posts ol a:hover, .posts ul a:hover {
    border-bottom:1px solid {color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

a.tumblr_blog {
    border-bottom:1px solid #dedede;
    color:#5f5f5f;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

a:hover.tumblr_blog {
    border-bottom: 1px solid {color:hover};    
    color:{color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}


.post400 .posts {
    font-size:10px;
}


.post250 .posts {
    margin:40px auto;
    font-size:10px;
    padding:12px;
}

.posts video {
  width: 100%    !important;
  height: auto   !important;
}

.posts img {
    max-width:100%;
    height:auto;
}

.post500 #entries {
    width:500px;

}

.post400 #entries {
    width:400px;

}

.post250 #entries {
    width:250px;

}

.post400 .posts:first-of-type {
    margin-top:-20px;
}

.post500 .posts:first-of-type {
    margin-top:-10px;
}

.post250 .posts:first-of-type {
    margin-top:-30px;
}


/*t*/

.titre {
    text-align:center;
    font-weight:bold;
    font-size:1.5em;
    color:{color:accent};
    margin-bottom:15px;
    line-height:160%;
    text-transform:uppercase;
}

/*lightbox*/
#tumblr_lightbox, .tmblr-lightbox {background:rgba({RGBcolor:lightbox}, 0.8)!important;}
#tumblr_lightbox img, .tmblr-lightbox .vignette {
    opacity:0;
    border-radius:0!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -o-border-radius: 0!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
}

#tumblr_lightbox_center_image {
    opacity: 1!important; 
    background-color: #fff!important;
}

#tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
        transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;     
}

#tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
    opacity:1!important;
        transition: opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out; 
}

#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
    margin-top:-1%!important;
    padding: 2px!important;
    box-shadow: 0 0 0 transparent !important;
    border-radius: 0!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -o-border-radius: 0!important;
    

}


#tumblr_lightbox_caption { visibility: hidden; }

    {block:ifcrosshairhover}
.tumblr-box, #tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:pointer;}
    {/block:ifcrosshairhover}


/*chat*/

.chats {
    line-height:22px;
    padding:5px;
}

.chats strong {
    font-family:'raleway', arial, sans-serif;
    text-transform:uppercase;
    color:{color:accent};
}

.post250 .chats {
    font-size:10px;
    padding:3px;
}

/*audio posts*/
.flitwick {
    width:100%;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-itens:center;
    -moz-align-items:center;
    -ms-align-items:center;
     display: -webkit-box;
    -webkit-box-align: center;
    position:relative;
}

.grammy {
    position:relative;
    margin-left:0;
}

.post500 .grammy {
    width:100px;
    height:100px;    
}

.post400 .grammy {
    width:80px;
    height:80px;
}

.post250 .grammy {
    width:50px;
    height:50px;    
}


.mariah {
    position:absolute;
    background:#fff;
    z-index:10;
    opacity:0;
    text-align:center;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

.post500 .mariah {
    width:80px;
    height:80px;  
    margin-top:10px;
    margin-left:10px;    
}

.post400 .mariah {
    width:60px;
    height:60px;
    margin-top:10px;
    margin-left:10px;    
}

.post250 .mariah {
    width:40px;
    height:40px;
    margin-top:5px;
    margin-left:5px;    
}

.mariah:hover {
    opacity:0.8;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

.playbox {
    overflow:hidden;
}

.post500 .playbox {
    width:40px;
    height:40px;
    margin-top:25px;
    margin-left:20px;    
}

.post400 .playbox {
    width:40px;
    height:40px;
    margin-top:15px;
    margin-left:12px;    
}

.post250 .playbox {
    width:25px;
    height:25px;
    margin-top:5px;
    margin-left:8px;    
}


.taylor {
    padding:0;
    margin-left:0px;
    background:#fafafa;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-itens:center;
    -moz-align-items:center;
    -ms-align-items:center;
    justify-content:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
     display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}

.post500 .taylor {
    width:calc(100% - 100px);
    height:100px;    
}

.post400 .taylor {
    width:calc(100% - 80px);
    height:80px;    
}

.post250 .taylor {
    width:calc(100% - 50px);
    height:50px;    
}

.swift {
    color:#000;
    font-weight:normal;
    text-overflow: ellipsis;    
    white-space: nowrap;
    overflow:hidden;    
}

.post500 .swift {
    max-width:calc(100% - 50px);    
}

.post400 .swift {
    max-width:calc(100% - 50px);   
    font-size:10px;
}

.post250 .swift {
    max-width:calc(100% - 30px);   
    font-size:8px;
    line-height:12px;
}

.swift b {
    font-family:'raleway', arial,sans-serif;
    font-weight:bold;
    color:#000;
}

/*link*/

.posts nav a {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	outline: none;
	color: {color:accent};
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 2em;
	text-align:center;
}

.post250 .posts nav a{
    font-size:1.5em;
}

.posts nav a:hover,
.posts nav a:focus {
	outline: none;
}

.linkp a {
	overflow: hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	height: 2em;
	line-height:2em;
	width:100%;
}

.linkp a span {
	position: relative;
	width:100%;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.linkp a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.linkp a:hover span,
.linkp a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/*quotes*/

.quotes {
    font-style:italic;
    font-size:1.2em;
    display:inline;
    line-height:140%;
}

.post400 .quotes, .post500 .quotes {font-size:1.5em;}

.speaker {
    margin-top:12px;
    margin-bottom:12px;
    text-align:right;
}

.post250 .speaker {margin-top:8px;margin-bottom:8px;}


/*Ask*/

.ask_cont {
    background:#fafafa;
    padding:10px;
}

.post250 .ask_cont {padding:5px 8px;}

.asker {
    text-transform:uppercase; 
    margin-bottom:8px; 
    letter-spacing:1px;
}

.post250 .asker {margin-bottom:3px;}


.asker a {
    border-bottom:1px solid #dedede;
    color:#000;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
    
}

.asker a:hover {
    border-bottom:1px solid {color:hover};
    color:{color:hover};
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

/*post info*/

.footer {
    position:relative;
    width:100%;
    margin:0 auto;
    padding:10px 0;
    text-align:center;
}

.post400 .footer {
    padding:8px 0;
}


.post250 .footer {
    padding:5px 0;
    font-size:9px;
}

.footer a {
    font-weight:bold;
    display:inline-block;
    color:#000;
    margin-left:10px;
    text-transform:uppercase;
}

.post400 .footer a {
    margin-left:8px;
}

.post250 .footer a {
    margin-left:6px;
    padding:2px;
}

.tags {
    text-align:center;
    width:100%;
    margin:0px auto -5px auto;
    word-wrap: break-word;
    text-transform:none;
}

.post250 .tags, .post400 .tags {
    margin:0 auto 0 auto;
}

.tags a {
    display:inline-block;
    padding:0 5px 0 5px;
    color:{color:tags};
    font-weight:300;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

.tags a:hover {
    color:{color:hover};
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

.post250 .tags a {
    padding:2px;
    font-size:8px;
}

/*Pagination*/
#border3 a{
    color:#fff;
    font-size:14px; 
    line-height:30px; 
    font-weight:normal; 
    text-transform:uppercase;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

#border3 a:hover {color:{color:hover};}

/*Scroll to top*/

#scroll-to-top {
    position:fixed;
    bottom:7px;
    right:5px; 
    text-transform:uppercase; 
    z-index:101;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

#scroll-to-top a {
    color:#fff;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

#scroll-to-top a:hover {
    color:{color:hover};
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

/*Notes*/

div.notes {

    text-align:left;
    margin:0 auto 0 auto;
    font-weight:300;
    overflow-y:auto;
    overflow-x:hidden;
}

.post500 div.notes {max-height:500px;}
.post400 div.notes {max-height:400px;}
.post250 div.notes {max-height:300px;}

.notes h1 {font-weight:400;text-transform:uppercase;font-size:1.3em; text-align:center;}


div.notes::-webkit-scrollbar {width: 2px; height: 3px; background: #FFFFFF; }
 
div.notes::-webkit-scrollbar-thumb { background-color: {color:accent}; }
 
ol.notes {
                padding: 0px;
                margin: 0px;
                list-style-type: none;
            }
 
ol.notes li.note {padding: 8px; text-indent:10px; line-height:150%;}

.post250 ol.notes li.note {padding: 5px; text-indent:8px; line-height:150%; font-size:9px;letter-spacing:1px;}

ol.notes li.note .action a {
    border-bottom:1px solid #dedede;
    color:#5f5f5f;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

ol.notes li.note .action a:hover {
    border-bottom: 1px solid {color:hover};
    color:{color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}
            
ol.notes li.note:before {content:"―"; position:relative; left:-10px;} 

.post250 ol.notes li.note:before {left:-8px;} 
 
ol.notes li.note img.avatar {display:none;}

li.more_notes_link_container:before {display:none;}

li.more_notes_link_container {text-indent:0; text-transform:uppercase; font-size:14px; margin-top:10px; margin-bottom:-5px;}

.post250 li.more_notes_link_container {font-size:12px;padding:0;}

li.more_notes_link_container a {
    color:#000;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

li.more_notes_link_container a:hover {
    color:{color:hover};
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

 
ol.notes li.note blockquote {
                border-color: #eaeaea;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }
with_commentary.blockquote {max-width:100%;}            
           
ol.notes li.note blockquote a {
                text-decoration: none;
                border-bottom:none;
            }


/*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
#leo {

    font-family: Arial, Sans-Serif;
    text-transform:uppercase;
    text-align:center;
    z-index:99;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;    
    
}

#leo a {
     z-index:99;
    position:fixed;
    font-size:12px;
    line-height:16px;
    width:18px;
    height:18px;
    font-weight:300;
    bottom:35px;
    right:35px;
    color:#000;
    background:rgba(255,255,255,0.4);
    padding:5px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;    

}

#leo a:hover {
    background-color:rgba(0,0,0,1);
    color:#fff;
    border-radius:50%;
   -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
   -moz-animation: hermione 1s;
   -o-animation: hermione 1s;
    animation: hermione 1s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    
    -moz-transform: rotate(720deg); /* IE 9 */
    -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
    transform: rotate(720deg);
    
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    

}
 
@-webkit-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
@-moz-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
@-o-keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
 
@keyframes hermione {
    0%   {color:#000;}
    25%  {color:#ACE4EA;}
    50%  {color:#FFFBDD;}
    75%  {color:#ACE4EA;}
    100% {color:#fff;}
}
/*END OF CREDIT*/

/*media queries*/
@media screen and (max-width: 1024px) {

#border1, #border3 {
    height:20px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

#border2, #border4 {
    width:20px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;     
}

#border3 a{
    font-size:12px; 
    line-height:20px; 
    text-transform:uppercase;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

.burger {
  left:3px;
  top:5px;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.burger__patty {
    width:15px;
    height:1.5px;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
          transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

#scroll-to-top {
    bottom:2px;
	transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;    
}

#leo a {
    bottom:25px;
    right:25px;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;

}
    
} 
    
</style>  

  <script type="text/javascript" src="http://www.jqueryscript.net/demo/Simple-Back-To-Top-Link/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){

	$(function () {
	    
		$(".top").click(function(){
		$('body,html').animate({scrollTop:0},1000);
		return false;
		
		});
		});
		});
  </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// minimal soundcloud player © eoxk.tumblr
$(document).ready(function(){
   var color = '{color:accent}'; // color of play button (hex) 
   $('.soundcloud_audio_player').each(function(){
       $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
   });
});
</script>

    </head>
<body class="{select:post width} {select:background}">

<div id="border1">
  <div class="burger">
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
    <div class="burger__patty"></div>
  </div>

  <nav class="menu">
    <div class="menu__brand">
<figure class="effect-ming">
						<img src="{image:profile}"/>
						<figcaption>
							<h2>Info</h2>
		<p>{block:description}{description}{/block:description}</p>
					
						</figcaption>			
					</figure>
    </div>
    <ul class="menu__list">
     <li class="menu__item"><a href="{text:Link1 URL}" class="menu__link">{text:Link1}</a></li>
     <li class="menu__item"><a href="{text:Link2 URL}" class="menu__link">{text:Link2}</a></li>
     <li class="menu__item"><a href="{text:Link3 URL}" class="menu__link">{text:Link3}</a></li>
     <li class="menu__item"><a href="{text:Link4 URL}" class="menu__link">{text:Link4}</a></li>
     <li class="menu__item"><a href="{text:Link5 URL}" class="menu__link">{text:Link5}</a></li>
     
     
    </ul>
  </nav>    
</div>

<div id="border2"></div>
<div id="border3">
    {block:IndexPage}
{block:Pagination}

            {block:PreviousPage}
        <a href="{PreviousPage}">&#8592;Back</a>
            {/block:PreviousPage}
            {block:NextPage}
            <a href="{NextPage}">Forth&#8594;</a>
            {/block:NextPage}   
           
{/block:Pagination}
{/block:IndexPage}
</div>
<div id="border4"></div>

<div id="header">
<a class="link link--kukuri" href="/" data-letters="{Title}">{Title}</a> 
</div>

<div id="entries">
		   {block:Posts} 
		   <div class="posts">
		       
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto">{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-500}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:Audio}
<div class="flitwick">

<div class="mariah">
    <div class="playbox">{AudioPlayerWhite}</div>
</div>

<div class="grammy">
<img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
{block:AlbumArt}
<img src="{AlbumArtURL}" style="position:absolute;">
{/block:AlbumArt}    
</div>


<div class="taylor">
    <div class="swift">
{block:TrackName}
<b>Song:</b> {TrackName}
{/block:TrackName}<br>

{block:Artist}
<b>Artist:</b> {Artist}
{/block:Artist}<br>

{block:Album}
<b>Album:</b> {Album}
{/block:Album}

    </div>
</div>

</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
{/block:Audio}

{block:Quote}
<div class="quotes">"{Quote}"</div>

{block:Source}
<div class="speaker">
     ― {Source}
</div>
{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}<div class="titre">{Title}</div>{/block:Title}
{Body}
{/block:Text}

{block:Answer}
<div class="ask_cont">
    <div class="asker">{Asker} asked:</div>
{Question}
</div>
{Answer}
{/block:Answer}

{block:Chat}
{block:Title}<div class="titre">{Title}</div>{/block:Title}
{block:Lines}
<div class="chats">
{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br  />    
</div>
{/block:Lines}
{/block:Chat}

{block:Link}
<nav class="linkp" id="linkp">
<a href="{URL}"><span data-hover="{Name}">{Name}</span></a>
</nav>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Date}
<div class="footer">
   <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a> 
   
   {block:NoteCount}
    <a href="{Permalink}">{NoteCount}+</a>
    {/block:NoteCount}

{block:RebloggedFrom}
    <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
   
     {block:ContentSource}
    <a href="{SourceURL}"  title="{ReblogRootName}">src</a>
    {/block:ContentSource}
{/block:RebloggedFrom}
   
   <a href="{ReblogURL}"><span class="fontawesome-refresh"></span></a>  
    
</div>

{block:HasTags}
     <div class="tags">
    {block:Tags}
    <a href="{TagURL}">{Tag}</a>
    {/block:Tags}
    </div>
{/block:HasTags} 
    
{/block:Date}

		   </div>
		   
{block:PermalinkPage}
{block:date}
    {block:NoteCount} 
<div class="posts">
          
   <div class="notes">
   <h1>Notes</h1>
        {block:PostNotes}
    {PostNotes}
    {/block:PostNotes}    
   </div> 
  
</div>
 {block:NoteCount}
{/block:date}
{/block:PermalinkPage}		   
		   {/block:Posts}     
</div>

{block:ifscrolltotopbutton}
<div id="scroll-to-top">
    <a class="top" href="#">Top</a>
</div>
{/block:ifscrolltotopbutton}


<!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
<div id="leo">
<a href="http://hermionejean.co.vu">♚</a>
</div>
<!--END OF CREDIT-->


<!--Scripts-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.1.3.min.js"><\/script>')</script>


<script>
(function($, window, document, undefined) {

  $.fn.animateIn = function(options) {
    var self = $(this);

    var settings = $.extend({
      class: 'class',
      inter: 60
    }, options);

    var action = function() {
      (function animate(counter) {

        setTimeout(function() {

          self.eq(counter).addClass(settings.class);

          counter++;

          if (counter < self.length) animate(counter);

        }, settings.inter);

      })(0);
    };

    var events = function() {
      $(document).on('ready', action);
    };

    events();
  };

  $('.tiles__tile').animateIn({
    class: 'tiles__tile--enter',
    inter: 90
  });

  // blog post thumbnails entrance animation
   $('.posts__thumb').animateIn({
    class: 'posts__thumb--show',
    inter: 90
  });

  // work tiles entrance animation
  $('.work__tile').animateIn({
    class: 'work__tile--show',
    inter: 120
  });

}(jQuery, window, document));
(function($, window, document, undefined) {
  'use strict';

  var Menu = (function() {

    var elements = {
      hamburger: $('#js-hamburger'),
      menu: $('#js-menu'),
      menuList: $('#js-menu').find('.menu__list'),
      logo: $('#js-menu').find('.menu__logo'),
      link: $('#js-menu').find('a'),
      win: $(window)
    };

    var open = function(event) {
      event.preventDefault();
      var e = elements;
      e.hamburger.toggleClass('c-hamburger--close');
      e.menu.toggleClass('menu--active');
      e.menuList.toggleClass('menu__list--active');
      e.logo.toggleClass('menu__logo--active');
      e.link.toggleClass('menu__link--active');
    };

    var close = function() {
      var e = elements;
      if (e.menu.hasClass('menu--open')) {
        e.hamburger.removeClass('c-hamburger--close');
        e.menuList.removeClass('menu__list--active');
        e.logo.removeClass('menu__logo--active');
        e.link.removeClass('menu__link--active');
        e.removeClass('menu--active');
      }
    };

    var bindActions = function() {
      var e = elements;
      e.hamburger.on('click', open);
      e.win.on('click', close);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  var Tiles = (function() {

    var tileBtn = $('li.tiles__tile');
    var allContent = $('li.tiles-content__item');
    var contentWrap = $('.tiles-content__wrapper');
    var header = $('#border1');
    var backBtn = $('.js-tiles-back');
    var nextBtn = $('.js-tiles-next');
    var closeBtn = $('.js-tiles-close');

    var open = function() {
      var self = $(this);
      var match = self.attr('data-tile');
      var content = $('li#' + match);

      self.toggleClass('active');
      content.toggleClass('active');
      contentWrap.css({'transition-delay': '.35s'});
      header.addClass('header--hidden');

      return false;
    };

    var close = function(event) {
      if (allContent.hasClass('active')) {
      allContent.removeClass('active');
      setTimeout(function() {
        tileBtn.removeClass('active');
        }, 400);
      contentWrap.css({'transition-delay': '0'});
      header.removeClass('header--hidden');

      }
    };

    var next = function() {
      var activeSlide = $('.tiles-content__item.active');
      var nextSlide = activeSlide.next();

      var activeBtn = $('.tiles__tile.active');
      var nextBtn = activeBtn.next();

      if (nextSlide.length === 0) {
        nextSlide = allContent.eq(0);
        nextBtn = tileBtn.eq(0);
      }

      nextSlide.addClass('active');
      activeSlide.removeClass('active');

      nextBtn.addClass('active');
      activeBtn.removeClass('active');
    };

    var prev = function() {
      var activeSlide = $('.tiles-content__item.active');
      var prevSlide = activeSlide.prev();

      var activeBtn = $('.tiles__tile.active');
      var prevBtn = activeBtn.prev();

      if (prevSlide.length === 0) {
        prevSlide = allContent.eq(0);
        prevBtn = tileBtn.eq(0);
      }

      prevSlide.addClass('active');
      activeSlide.removeClass('active');

      prevBtn.addClass('active');
      activeBtn.removeClass('active');
    };

    var bindActions = function() {
      tileBtn.on('click touchstart', open);
      backBtn.on('click', prev);
      nextBtn.on('click', next);
      closeBtn.on('click', close);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  var WorkTileExpand = (function() {
    var tile = $('.work__tile');
    var tileBg = $('.work__tile-bg');
    var tileLink = $('.work__tile a');

    var W = $(window).width();
    if (tile.length > 0) {
      var TW = tile.width();
      var offsetVal = tile.offset().left;
      var scaleVal = W / TW;
      var transVal = offsetVal - W;
    }

    var expand = function(e) {
      e.preventDefault();

      $(this).css('z-index', '50');

      var tileBg = $(this).find('.work__tile-bg');
      var nextPage = $(this).find('a').attr('href');
      var title = $(this).find('.work__title');

      // fade out title of column
      title.velocity({
        opacity: 0
      }, {
        duration: 200
      });

      // expand div inside column to take up screen
      tileBg.velocity({
        scaleX: scaleVal,
      }, {
        easing: [0.23, 1, 0.32, 1],
        duration: 600,
        complete: function() {
          // load next page
          location.href = nextPage;
        }
      });
    };

    var bindActions = function() {
      tile.on('click', expand);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  var PageTrans = (function() {
    var trigger = $('a.page-trans');
    var blogHalf = $('.blog__half');
    var win = $(window);

    var trans = function() {
      if (win.width() >= 1023) {
        blogHalf.removeClass('blog__half-animation-left');
        blogHalf.removeClass('blog__half-animation-right');
        var nextPage = $(this).attr('href');
        blogHalf.eq(0).velocity({
          translateY: '-100%'
        }, {
          duration: 500,
          easing: [0.755, 0.05, 0.855, 0.06],
          complete: function() {
            location.href = nextPage;
          }
        });
        blogHalf.eq(1).velocity({
          translateY: '100%'
        }, {
          duration: 500,
          easing: [0.755, 0.05, 0.855, 0.06]
        });

        return false;
      }
    };

    var bindActions = function() {
      trigger.on('click', trans);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  var VerticalSlider = (function() {
    var w = $(window);
    var list = $('.vs__list');
    var item = $('.vs__item');
    var nextBtn = $('.vs__next');
    var prevBtn = $('.vs__prev');
    var len = item.length;

    var setup = function() {
      item.first().addClass('vs__item--active');
    };

    var next = function() {
      var cur = list.find('.vs__item--active');
      var nex = cur.next('.vs__item');
        if (!nex.length) {
        nex = item.first();
      }
      var nexIn = nex.index();
      var val = (nexIn/len) * 100;

      cur.removeClass('vs__item--active');
      nex.addClass('vs__item--active');

      list.css({
        'transform': 'translate3d(0,-' + val + '00%,0)',
        '-webkit-transform': 'translate3d(0,-' + val + '00%,0)'
      });

      bgcolor();

      return false;
    };

    var prev = function() {
      var cur = list.find('.vs__item--active');
      var pre = cur.prev('.vs__item');
        if (!pre.length) {
        pre = item.last();
      }
      var preIn = pre.index();
      var val = (preIn/len) * 100;

      cur.removeClass('vs__item--active');
      pre.addClass('vs__item--active');

      list.css({
        'transform': 'translate3d(0,-' + val + '00%,0)',
        '-webkit-transform': 'translate3d(0,-' + val + '00%,0)'
      });

      bgcolor();

      return false;
    };

    var bgcolor = function() {
      if (item.eq(0).hasClass('vs__item--active')) {
        list.css('background', 'rgba(147, 115, 191, 1)');
      } else if (item.eq(1).hasClass('vs__item--active')) {
        list.css('background', 'tomato');
      } else if (item.eq(2).hasClass('vs__item--active')) {
        list.css('background', 'deepskyblue');
      } else {
        return;
      }
    };

    var bindActions = function() {
      setup();
      nextBtn.on('click', next);
      prevBtn.on('click', prev);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  var CommunicationSlides = (function() {
    var link = $('.com__nav-link');
    var linkParent = link.parent('li');
    var section = $('.com__section');
    var sectionContent = section.find('*');

    var switchTab = function() {
      var p = $(this).parent('li');
      var i  = p.index();
      var s = section.eq(i);
      var c = s.find('*');

      section.removeClass('active');
      sectionContent.removeAttr('style');
      s.addClass('active');

      c.css({
        transform: 'none',
        opacity: 1
      });

      linkParent.removeClass('active');
      p.addClass('active');

      return false;
    };

    function activeFirst() {
      section.first().addClass('active');
      section.first().find('*').css({
        transform: 'none',
        opacity: 1
      });
      linkParent.first().addClass('active');
    }

    activeFirst();

    var bindActions = function() {
      link.on('click', switchTab);
    };

    var init = function() {
      bindActions();
    };

    return {
      init: init
    };

  }());

  Menu.init();
  Tiles.init();
  WorkTileExpand.init();
  PageTrans.init();
  VerticalSlider.init();
  CommunicationSlides.init();

  /** Convert linked SVG into inline SVG
   * Allows SVG to be styled using CSS and keeps HTML clean.
   */

  $('img.c-svg').each(function() {
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
      // Get the SVG tag, ignore the rest
      var $svg = jQuery(data).find('svg');

      // Add replaced image's ID to the new SVG
      if (typeof imgID !== 'undefined') {
        $svg = $svg.attr('id', imgID);
      }
      // Add replaced image's classes to the new SVG
      if (typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass + ' replaced-svg');
      }

      // Remove any invalid XML tags as per http://validator.w3.org
      $svg = $svg.removeAttr('xmlns:a');

      // Replace image with new SVG
      $img.replaceWith($svg);

    }, 'xml');

  });

}(jQuery, window, document));
(function() {
  function whichAnimationEvent(){
    var t,
        el = document.createElement("fakeelement");

    var animations = {
      "animation"      : "animationend",
      "OAnimation"     : "oAnimationEnd",
      "MozAnimation"   : "animationend",
      "WebkitAnimation": "webkitAnimationEnd"
    };

    for (t in animations){
      if (el.style[t] !== undefined){
        return animations[t];
      }
    }
  }

  var animationEvent = whichAnimationEvent();

  var elem = $('.io');

  $(document).on('ready', function() {
    setTimeout(function() {
      return elem.addClass('animate');
    }, 10);

    elem.addClass('grow');

    elem.one(animationEvent, function(event) {
      $(this).css('opacity', '0.2');
      $('.intro__title').addClass('intro__title--active');
      $('.intro__subtitle').addClass('intro__subtitle--active');
    });
  });
}).call(this);    
</script>
    

<script>
// http://unheap.com

$(function() {
  $('.browsehappy').click(function() {
    $(this).slideUp();
  });
});    
</script>

<script>
$(function() {

  (function() {
  
  var Menu = (function() {
    var burger = document.querySelector('.burger');
    var menu = document.querySelector('.menu');
    var menuList = document.querySelector('.menu__list');
    var brand = document.querySelector('.menu__brand');
    var menuItems = document.querySelectorAll('.menu__item');
    
    var active = false;
    
    var toggleMenu = function() {
      if (!active) {
        menu.classList.add('menu--active');
        menuList.classList.add('menu__list--active');
        brand.classList.add('menu__brand--active');
        burger.classList.add('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.add('menu__item--active');
        }
        
        active = true;
      } else {
        menu.classList.remove('menu--active');
        menuList.classList.remove('menu__list--active');
        brand.classList.remove('menu__brand--active');
        burger.classList.remove('burger--close');
        for (var i = 0, ii = menuItems.length; i < ii; i++) {
          menuItems[i].classList.remove('menu__item--active');
        }
        
        active = false;
      }
    };
    
    var bindActions = function() {
      burger.addEventListener('click', toggleMenu, false);
    };
    
    var init = function() {
      bindActions();
    };
    
    return {
      init: init
    };
    
  }());
  
  Menu.init();
  
}());

});    
</script>

    
</body>
</html>