Create a new version of paste:

<!DOCTYPE HTML>
<html>
<!--THEME 09 New Romantics by hermionegrangcr
 
THEME BLOG: grangersdesigns
 
 
          ♛       ♛       ♛                                
        ♛♛♛    ♛♛♛   ♛♛♛                      
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛              
         ♛♛♛  ♥ G♚D ♥ ♛♛♛  
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛                            
          ♛ ♛ ♛ ♛ ♛ ♛ ♛      © hermionegrangcr     
 
                           
Important:
 
♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)

♚ This theme is optimised for Google Chrome and laptops of 13~15 in.

♚ Tweak this to your preference as long as the credits remain intact.

♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
 
-->
    <head>
    
<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">

        <title>{Title}</title>
        
<link rel="shortcut icon" href="{Favicon}">         

<meta name="image:header" content="https://static.tumblr.com/8ba2d6b6940baea3e1a5db2b747d8dfe/xbvpdcx/TdLnyb3vc/tumblr_static_ehfwt5mie6g44488c04gcss48.jpg">    

<meta name="image:profile" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">

<meta name="image:fullscreen background"content="https://static.tumblr.com/9d0b462c49f7dcc77f08e34ab2df894e/xbvpdcx/UGFo91u72/tumblr_static_91tkp9uy89wkw0ok4o8c4g4oo.jpg">

<meta name="image:tiled background"content="https://static.tumblr.com/a3d14bc71c00f600c2a24f0909082b38/xbvpdcx/zE3o95r5y/tumblr_static_17lthqpjwkqo004g04os48g4g.png">        
        
<meta name="color:accent" content="#222">        
<meta name="color:highlight" content="#99a2ab">
<meta name="color:lightbox" content="#efefef">
<meta name="color:background colour" content="#efefef">
<meta name="color:grad1" content="#fafafa">
<meta name="color:grad2" content="#cdcdcd"> 


<meta name="if:show blogroll"content="">
<meta name="if:fadeoutphoto" content="">
<meta name="if:manual load" content="">
<meta name="if:hover tags"content="1">

<meta name="select:background" content="simplebg" title="Simple">
<meta name="select:background" content="colourbg" title="Colour">
<meta name="select:background" content="gradientbg" title="Gradient">
<meta name="select:background" content="fullscreenbg" title="Fullscreen image">
<meta name="select:background" content="repeatedbg" title="Repeated image">
        
<meta name="select:font size" content="12px" title="12px"> 
<meta name="select:font size" content="11px" title="11px"> 
<meta name="select:font size" content="10px" title="10px">
<meta name="select:font size" content="9px" title="9px"> 

<meta name="select:post width"content="post400"title="400px"/>
<meta name="select:post width"content="post500"title="500px"/>
<meta name="select:post width"content="post450"title="450px"/>
<meta name="select:post width"content="post350"title="350px"/>
<meta name="select:post width"content="post300"title="300px"/>
<meta name="select:post width"content="post250"title="250px"/>

<meta name="select:photoset gutter"content="5px"title="5px">
<meta name="select:photoset gutter"content="10px"title="10px">
<meta name="select:photoset gutter"content="2px"title="2px">
<meta name="select:photoset gutter"content="1px"title="1px">
<meta name="select:photoset gutter"content="0px"title="0px">

<meta name="select:post spacing" content="80px">
<meta name="select:post spacing" content="70px">
<meta name="select:post spacing" content="60px">
<meta name="select:post spacing" content="50px">
<meta name="select:post spacing" content="90px">
<meta name="select:post spacing" content="100px">
<meta name="select:post spacing" content="110px">
<meta name="select:post spacing" content="120px">

<meta name="select:captions" content="defcap" title="default">
<meta name="select:captions" content="unnested" title="un-nested">
<meta name="select:captions" content="inlinecap" title="inline">
<meta name="select:captions" content="hiddencap" title="hidden">

<meta name="select:post sat" content="" title="normal">
<meta name="select:post sat" content="reducedsat" title="Reduced Saturation">
<meta name="select:post sat" content="bandw" title="Black and White">


<meta name="text:basic info" content="Name, Age, Country">
<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="/">
<meta name="text:Link6" content="Link6">
<meta name="text:link6 URL" content="/">

<meta name="select:Link1 icon" content="lnr-home" title="Home">
<meta name="select:Link1 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link1 icon" content="lnr-star" title="Star">
<meta name="select:Link1 icon" content="lnr-heart" title="Heart">
<meta name="select:Link1 icon" content="lnr-smile" title="Smile">
<meta name="select:Link1 icon" content="lnr-map" title="Map">
<meta name="select:Link1 icon" content="lnr-tag" title="Tag">
<meta name="select:Link1 icon" content="lnr-menu" title="Menu">
<meta name="select:Link1 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link1 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link1 icon" content="lnr-user" title="User">

<meta name="select:Link2 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link2 icon" content="lnr-home" title="Home">
<meta name="select:Link2 icon" content="lnr-star" title="Star">
<meta name="select:Link2 icon" content="lnr-heart" title="Heart">
<meta name="select:Link2 icon" content="lnr-smile" title="Smile">
<meta name="select:Link2 icon" content="lnr-map" title="Map">
<meta name="select:Link2 icon" content="lnr-tag" title="Tag">
<meta name="select:Link2 icon" content="lnr-menu" title="Menu">
<meta name="select:Link2 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link2 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link2 icon" content="lnr-user" title="User">


<meta name="select:Link3 icon" content="lnr-star" title="Star">
<meta name="select:Link3 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link3 icon" content="lnr-home" title="Home">
<meta name="select:Link3 icon" content="lnr-heart" title="Heart">
<meta name="select:Link3 icon" content="lnr-smile" title="Smile">
<meta name="select:Link3 icon" content="lnr-map" title="Map">
<meta name="select:Link3 icon" content="lnr-tag" title="Tag">
<meta name="select:Link3 icon" content="lnr-menu" title="Menu">
<meta name="select:Link3 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link3 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link3 icon" content="lnr-user" title="User">

<meta name="select:Link4 icon" content="lnr-tag" title="Tag">
<meta name="select:Link4 icon" content="lnr-star" title="Star">
<meta name="select:Link4 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link4 icon" content="lnr-home" title="Home">
<meta name="select:Link4 icon" content="lnr-heart" title="Heart">
<meta name="select:Link4 icon" content="lnr-smile" title="Smile">
<meta name="select:Link4 icon" content="lnr-map" title="Map">
<meta name="select:Link4 icon" content="lnr-menu" title="Menu">
<meta name="select:Link4 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link4 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link4 icon" content="lnr-user" title="User">


<meta name="select:Link5 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link5 icon" content="lnr-tag" title="Tag">
<meta name="select:Link5 icon" content="lnr-star" title="Star">
<meta name="select:Link5 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link5 icon" content="lnr-home" title="Home">
<meta name="select:Link5 icon" content="lnr-heart" title="Heart">
<meta name="select:Link5 icon" content="lnr-smile" title="Smile">
<meta name="select:Link5 icon" content="lnr-map" title="Map">
<meta name="select:Link5 icon" content="lnr-menu" title="Menu">
<meta name="select:Link5 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link5 icon" content="lnr-user" title="User">


<meta name="select:Link6 icon" content="lnr-heart" title="Heart">
<meta name="select:Link6 icon" content="lnr-star" title="Star">
<meta name="select:Link6 icon" content="lnr-music-note" title="Music Note">
<meta name="select:Link6 icon" content="lnr-tag" title="Tag">
<meta name="select:Link6 icon" content="lnr-envelope" title="Envelope">
<meta name="select:Link6 icon" content="lnr-home" title="Home">
<meta name="select:Link6 icon" content="lnr-smile" title="Smile">
<meta name="select:Link6 icon" content="lnr-map" title="Map">
<meta name="select:Link6 icon" content="lnr-menu" title="Menu">
<meta name="select:Link6 icon" content="lnr-paperclip" title="Paperclip">
<meta name="select:Link6 icon" content="lnr-user" title="User">


<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>


<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<style type="text/css">

.animsition-loading {display:none;}

/*Tumblr Controls*/
.iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
    -webkit-animation:fadeIn ease-in 0.3s;
    -o-animation:fadeIn ease-in 0.3s;
    -moz-animation:fadeIn ease-in 0.3s;
    animation:fadeIn ease-in 0.3s;        
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

::selection {background:#f5f5f5; color:#000;}
::-moz-selection {background:#f5f5f5; color:#000;}
::-webkit-selection {background:#f5f5f5; color:#000;}


::-webkit-scrollbar {display:none;}

::-webkit-scrollbar-thumb { display:none; }

#s-m-t-tooltip{
    position:absolute;
    margin-top: 10px!important;
    z-index:9999999999;
    padding:2px 5px 2px 5px;
    color:{color:accent};
    max-width:500px;
    letter-spacing:1.5px;
    background: #fff;
    border-left:2px solid #eaeaea;
    font-size:12px;
    text-transform:uppercase;
    box-shadow: 1px 1px 3px #eaeaea;
}

html, body, .wrapper { height: 100%; }

*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}    

body {
    color:#5f5f5f;
    font-family:'Open Sans',arial,sans-serif;
    line-height:150%;
    font-size:{select:font size};
    margin:0;
    background-attachment:fixed;
    overflow:hidden;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.simplebg {background:#efefef;}
body.colourbg {background:{color:background colour};}
body.gradientbg {
    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 */   
}

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

body.repeatedbg {background-image: url('{image:tiled background}');}

a {
    color:#999;
    text-decoration:none;
    cursor:help;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

a:hover {
    color:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    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;
background:#f5f5f5;
color:#000;
padding:5px;
}

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

/*cont*/
.wrapper {
    width:100%;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -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;        
}

#container {
    background:#fff;
    width:65%;
    max-width:750px;
    height:75%;
    max-height:500px;
    overflow:auto;
    margin-bottom:2%;
    position:relative;
}

.contwrap {
    width:100%;
    height:100%;
    min-height:100%;
    border:25px solid #fff;
    border-bottom:none;
}

/*welcome screen*/

header.welcome {
    width:100%;
    height:100%;
    background-image: url('{image:header}');
    font-family:'Lato';
    background-repeat: no-repeat;
    background-attachment: local;
    background-position: center; 
    background-size:cover; 
    padding-bottom:25px;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:end;
  -webkit-align-items:flex-end;
      -ms-flex-align:end;
          align-items:flex-end;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
      -ms-flex-pack:center;
          justify-content:center; 
}

header.welcome .desc {
    width:60%;
    height:45%;
    background:#fff;
    padding:10px;
    padding-top:1.8%;
    position:relative;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;    
  -webkit-align-items:center;    
      -ms-flex-align:center;    
          align-items:center;  
    -webkit-box-orient:center;  
    -webkit-box-direction:normal;  
    -webkit-flex-direction:column;  
        -ms-flex-direction:column;  
            flex-direction:column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
   justify-content: space-between; 
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.desc h1, .desc .myinfo h2 {font-family:'montserrat',arial,sans-serif;color:{color:accent};font-weight:400;}

.desc h1 {text-align:center;text-transform:uppercase;letter-spacing:5px;font-size:12px;width:100%;   
}

.desc .myinfo { 
    color:#999;
    width:100%;
    text-align:center;
    padding-top:2%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.desc .myinfo h2 {
    font-size:16px;
    width:100%;
    letter-spacing:2px;   
    padding-bottom:1%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.desc .myinfo h2 a {color:initial;}
.desc .myinfo h2 a:hover {color:{color:highlight};}

.desc .showposts {
    width:100%;
    text-align:center;
    margin:auto;
    margin-bottom:6px;  
}


.showposts svg {
    width:20px;
    height:20px;
    fill:{color:accent};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.showposts svg:hover {
    fill:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

/*topbar*/
nav.topbar {
    position:fixed;
    width:inherit;
    max-width:750px;
    height:40px;
    background:{color:accent};
    z-index:10;margin:auto;opacity:0;
    font-family:'lato';
    line-height:100%;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display: -webkit-box;  
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;    
    -webkit-box-align: center; 
    justify-content:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;   
    -webkit-box-pack: center;     
    visibility:hidden;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}


.scrolledcont nav.topbar {
    opacity:1;
    visibility:visible;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

nav.topbar a {
    font-weight:400;
    font-size:120%;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin:0 8px 0 8px;
    color:#fff;
}

nav.topbar a::before, nav.topbar a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;  
}


nav.topbar a::before {
	margin-right: calc({select:font size} / 2);
	content: '[';
	-webkit-transform: translateX({select:font size});
	-moz-transform: translateX({select:font size});
	transform: translateX({select:font size});    
}
nav.topbar a::after {
	margin-left: calc({select:font size} / 2);
	content: ']';
	-webkit-transform: translateX(-{select:font size});
	-moz-transform: translateX(-{select:font size});
	transform: translateX(-{select:font size});    
}

nav.topbar a:hover::before, nav.topbar a:hover::after, nav.topbar a:focus::before, nav.topbar a:focus::after, nav.topbar a.active::after, nav.topbar a.active::before {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);    
}

.topbar a.active {color:{color:highlight};}


/*contents: posts + ask + explore + blogroll (optional) */

section {
    width:100%;
    min-height:600px;
    padding-top:80px;
}

/*Ask*/

#entries2 #owlery {width:100%;height:260px;}
.post500 #entries2 #owlery, .post450 #entries2 #owlery {width:100%;height:190px;}

/*About tab*/
p.abtdesc {font-style:italic;font-size:120%;margin-top:1em;}

div#abtcont {
    width:100%;
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex;  
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;     
}

#abtprofile {
    padding-top:1em;
    position:relative;
    width:25%;
}

#abtprofile img {
    border-radius:2%;
}

#abtprofile aside {
text-align:center;   
margin-top:calc({select:font size}/2);
}

#abtprofile aside a {
    display:inline-block;
    position:relative;
    font-size:110%;
    background:#fafafa;
    margin-top:2px;
    border-radius:2%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

#abtprofile aside a:hover {
    color:#fff;
    background:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.post500 #abtprofile aside a {
    width:38px;
    height:38px;
    line-height:38px;    
}

.post450 #abtprofile aside a {
    width:35px;
    height:35px;
    line-height:35px;    
}


.post400 #abtprofile aside a {
    width:30px;
    height:30px;
    line-height:30px;    
}

.post350 #abtprofile aside a {
    width:25px;
    height:25px;
    line-height:25px;    
}

.post300 #abtprofile aside a, .post250 #abtprofile aside a {
    width:18px;
    height:18px;
    line-height:18px;    
    font-size:100%;
}


#abttxt {
    width:67%;
    margin-left:8%;
}

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


/*Blogroll*/
article.broll {
   display:-webkit-box;
   display:-webkit-flex;
   display:-ms-flexbox;
   display:flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
            align-content: flex-start;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;  
}

article.broll > a {
    display:block;
    border-radius:8%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.post400 article.broll > a {
    width:60px;
    height:60px;
    margin:10px;    
}

.post500 article.broll > a {
    width:80px;
    height:80px;
    margin:10px;
}

.post450 article.broll > a {
    width:70px;
    height:70px;
    margin:10px;
}

.post350 article.broll > a {
    width:50px;
    height:50px;
    margin:10px;    
}

.post300 article.broll > a {
    width:50px;
    height:50px;
    margin:5px;    
}

.post250 article.broll > a {
    width:40px;
    height:40px;
    margin:5px;    
}

img.followed {
    display:block;
    opacity:1;
    border-radius:8%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
    
}

article.broll > a:hover {
    border-radius:50%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

article.broll > a:hover img.followed {
    border-radius:50%;
    opacity:0.6;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

/*TAB ANIMATIONS*/
.swashIn {
  -webkit-animation-name: swashIn;
  animation-name: swashIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;  
}

@-webkit-keyframes swashIn {
  0% {
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(0.9, 0.9);
  }

  100% {
  	opacity: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: scale(1, 1);
  }
}
@keyframes swashIn {
  0% {
    opacity: 0;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
  }

  90% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(0.9, 0.9);
  }

  100% {
  	opacity: 1;
    transform-origin: 50% 50%;
    transform: scale(1, 1);
  }
}

/*posts*/

.posts {margin:{select:post spacing} auto;}

.posts:not(.secs){
    {block:ifmanualload}
    -webkit-animation:fadeIn ease-in 1s;
    -o-animation:fadeIn ease-in 1s;
    -moz-animation:fadeIn ease-in 1s;
    animation:fadeIn ease-in 1s;    
    {/block:ifmanualload}    
}

.post500 .posts, .post500 .pg  {width:500px;}
.post450 .posts, .post450 .pg  {width:450px;}
.post400 .posts, .post400 .pg  {width:400px;}
.post350 .posts, .post350 .pg  {width:350px;}
.post300 .posts, .post300 .pg  {width:300px;}
.post250 .posts, .post250 .pg  {width:250px;}


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

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

.posts img.photop {display:block;line-height:0;}

/*captions*/

.posts h1, .posts h2 {font-weight:400;font-family:'montserrat';}

#entries2 .posts h1, #entries3 .posts h1, #entries4 .posts h1 {font-family:'Open Sans';}

.posts h2 {font-size:120%;margin-top:calc({select:font-size}/3);margin-bottom:calc({select:font-size}/1.5);}

.posts h1 {font-size:160%;margin:0;calc({select:font-size}/3);margin-bottom:calc({select:font size} * 1.25);}

.posts ul {padding-left:0;}
.posts ol {padding-left:20px;}
.posts ul li {list-style:none; padding:2px;text-indent:8px;}
.posts ol li {padding:2px;}
.posts ul li:before {content:"―"; position:relative; left:-8px;}


.posts .captions, .posts.secs {word-wrap: break-word;text-align:justify;}

/*links*/
.posts .captions a, #abttxt a, .quotesrc a, ol.notes li.note span.action > a {
    color:#5f5f5f;
    border-bottom:1px solid #eaeaea;
}

.posts .captions a:hover, #abttxt a:hover, .quotesrc a:hover, ol.notes li.note span.action > a:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
}

.unnested a.tumblr_blog {border-bottom:none!important;}

.posts p:empty {display:none;}

.posts figure {margin:{select:font size} 0 {select:font size} 0 !important;}

.defcap .posts .captions, .hiddencap .posts .captions {margin-top:0;line-height:1.6;}

body:not(.unnested) .captions * {vertical-align:inherit;}

.captions * {font-size:inherit;}

.unnested .captions {padding-top:{select:font size};}

blockquote.tumblr_parent {
    max-width:100%;
    margin:0;
}

.tumblr_parent blockquote {
 padding: 0 0 0 10px;
 margin: 0 0 0 0;    
 border-left:1px #eaeaea solid;
}


.unnested blockquote.tumblr_parent *:not(i):not(b):not(em):not(strong):not(a) {vertical-align:middle;}


img.tumblr_avatar {border-radius:10%;margin-right:{select:font size};margin-top:calc({select:font size} / 2);margin-bottom:calc({select:font size} / 2);width:36px;height:36px;}

img.tumblr_avatar + a.tumblr_blog {font-weight:bold;vertical-align:middle;}

blockquote.tumblr_parent .captions.txtps p:first-child:not(:empty){margin-top:0;}

.defcap blockquote, .hiddencap blockquote, .inlinecap .txtps blockquote { 
 border-left: 1px #eaeaea solid; 
 padding-left: 10px;
 margin-left: 10px; 
 max-width: 100%;
 margin:0;
}

.defcap blockquote blockquote, .hiddencap blockquote blockquote, .inlinecap .txtps blockquote blockquote {
 padding: 0;
 margin: 0;
 border:none;
    
}

.inlinecap .posts .captions {margin-top:8px;line-height:1.8;font-size:95%;}


.inlinecap .captions *:not(ul):not(li):not(ol):not(h2):not(figure) {display:inline!important;}

.inlinecap .captions blockquote {
    display:inline!important;
    margin:0;
    padding:0;
    
}

.captions em, .captions i {font-style:inherit;}


.hiddencap .captions:not(.txtps) {display:none;}


/*post sat*/
body.reducedsat .posts img {
    -webkit-filter: saturate(25%);
    filter: saturate(25%);   
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

body.reducedsat .posts:hover img {
    -webkit-filter: saturate(100%);
  filter: saturate(100%);   
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

body.bandw .posts img {
    -webkit-filter: saturate(0%);
    filter: saturate(0%);   
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

body.bandw .posts:hover img {
    -webkit-filter: saturate(100%);
  filter: saturate(100%);   
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

/*lightbox*/
#tumblr_lightbox,.tmblr-lightbox {background:{color:lightbox}!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }


#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;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

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


#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image { 
    background-color: #fff!important;
    padding: {select:photoset gutter}!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,.tmblr-lightbox .lightbox-caption { visibility: hidden; }


.tumblr-box {cursor:help;}

#tumblr_lightbox_center_link, #tumblr_lightbox_left_link, #tumblr_lightbox_right_link {cursor:crosshair;}

.tumblr-box {
    background-color:rgba(255,255,255,0)!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

{block:iffadeoutphoto}
.tumblr-box:hover{
    background-color:rgba(255,255,255,0.5)!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}
{/block:iffadeoutphoto}

/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
.photo-slideshow .count-1 {
    margin-bottom:{select:photoset gutter}!important;
}

 
.photo-slideshow .count-2 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc(50% - ({select:photoset gutter}/2))!important;
}
 
.photo-slideshow .count-2:first-child {
    margin-left:0!important;
}
 
.photo-slideshow .count-3 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
}
 
.photo-slideshow .count-3:first-child {
    margin-left:0!important;
}
.photo-slideshow {
	display:block!important;
	margin-bottom:calc(-({select:photoset gutter} - 3px));
	position:relative;
	width:100%;
}

.photo-slideshow.processed {margin-bottom:0!important;}
.row:last-of-type .count-1{margin-bottom:0!important;}
/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */


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

.grammy {
    position:relative;
    margin-left:0;
    width:100px;
    height:100px;    
}

.post300 .grammy, .post250 .grammy {width:70px;height:70px;}

.mariah {
    position:absolute;
    background:#fff;
    z-index:10;
    opacity:0;
    text-align:center;
    width:80px;
    height:80px;  
    margin-top:10px;
    margin-left:10px;  
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.post300 .mariah, .post250 .mariah {width:50px;height:50px;}

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

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

.post300 .playbox, .post250 .playbox {width:25px;height:25px;}


.taylor {
    padding:0;
    margin-left:0px;
    background:#fafafa;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    align-items:center;
    -webkit-align-items: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;
    width:calc(100% - 100px);
    height:100px;    
}

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

.swift {
    font-weight:normal;
    text-overflow: ellipsis;    
    white-space: nowrap;
    overflow:hidden;
    max-width:calc(100% - 50px);  
    line-height:2;
}

.post300 .swift, .post250 .swift {line-height:1.75;}


.swift b {
    font-weight:bold;
    color:{color:accent};
}

.chatlines {margin-top:calc((2 * {select:font size}) / 3);}
.chatlines:first-of-type {margin-top:0;}
article:last-of-type {margin-bottom:calc({select:font size});}

.quotes {
    font-size:120%;
    font-weight:400;
    margin-top:calc({select:font size}/3);
    margin-bottom:calc((2 * {select:font size}) / 3);
    line-height:160%;
    font-style:italic;
}

.quotesrc {
    margin-top:calc({select:font size}/3);
    margin-bottom:calc({select:font size});
}

.linkp {
    background:#fafafa;
    padding-left:{select:font size};
    color:#999;
    font-size:160%;
    border-radius:2px;
    width:100%;
    height:50px;
    line-height:50px;
    position:relative;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-weight:400;
    font-family:'Lato';
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.linkp:hover {
    background:{color:highlight};
    color:#fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
} 

.linkp > a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

span.lnr-link {margin-right:calc({select:font size} / 2);}

.askcont {
    background:#fafafa;
    padding:5px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;    
}

.askimg {padding-right:16px;width:64px;}
.askimg img {width:64px;height:auto;display:block;opacity:1;border-radius:8%; -webkit-transition: all 0.3s ease-in-out;transition:all 0.3s ease-in-out; }
.askimg a:hover img {
    opacity:0.7;
    border-radius:50%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}
.askmsg {width:calc(100% - 80px);}


.post300 .askimg, .post300 .askimg img, .post250 .askimg, .post250 .askimg img {width:48px;padding-right:12px;}
.post300 .askmsg, .post250 .askmsg {width:calc(100% - 60px);}

a.asker {font-family:'Montserrat';}
.askmsg a {font-weight:400;color:{color:accent};}
.askmsg a:hover {color:{color:highlight};}

.postfooter {
    width:100%;
    margin-top:calc({select:font size} / 2);
    padding-bottom:0;
    font-family:'Lato',arial,sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:1.1px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
        -ms-flex-pack:start;
            justify-content:flex-start;
}

.postfooter a {color:#999;}
.postfooter a:hover {color:{color:highlight};}

div.viasrc {margin-left:calc(({select:font size} * 4) / 3);}

.socactions {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;   
    margin-left:auto;
}

.socactions svg {
    fill:#999;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

.rihrih svg:hover {
    fill:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

.rihrih {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  margin-right:calc(({select:font size} * 2)/3);
}

.custom-like-button {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  cursor:pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 3;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.like_button:hover + .our_button svg, .like_button.liked + .our_button svg {
  fill: red;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

.posts .lnr {width:100%;height:100%;}

.tags {
    width: 100%;
    margin-top: calc({select:font size} / 1.5);
    word-wrap: break-all;
{block:ifhovertags}    
    opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
{/block:ifhovertags}       
}

.posts:hover .tags {
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.tags a {
    margin:0 calc({select:font size} / 2) 0 calc({select:font size} / 2);
    display:inline;
}

.tags a:first-of-type {margin-left:0;}

/*notelist*/

.posts.notelist {margin-bottom:0px;}

.notelist ol.notes {list-style:none;margin:0;padding-left:0;}

.notelist ol.notes li.note {
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;     
    margin:16px 0 16px 0;
}

.notelist ol.notes li.note:first-of-type {margin-top:8px;}

.notelist ol.notes li.note:last-of-type {margin-bottom:8px;}

.notelist ol.notes li.note a.avatar_frame {height:50px;margin-right:16px;}

.post300 .notelist ol.notes li.note a.avatar_frame, .post250 .notelist ol.notes li.note a.avatar_frame {height:36px;margin-right:12px;}


.notelist ol.notes li.note img.avatar {
    border-radius:5%;
    width:50px;
    height:50px;
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.post300 .notelist ol.notes li.note img.avatar, .post250 .notelist ol.notes li.note img.avatar {width:36px;height:36px;}


.notelist ol.notes li.note img.avatar:hover {
    opacity:0.7;
    border-radius:50%;    
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;       
}

.notelist ol.notes li.note span.action {word-wrap: break-word;max-width:calc(100% - 70px);}

.post300 .notelist ol.notes li.note span.action, .post250 .notelist ol.notes li.note span.action {max-width:calc(100% - 60px);}


li.with_commentary blockquote {
    display:none;
} 

ol.notes li.note.more_notes_link_container {
    background:transparent;
    margin-top:2em;
    margin-bottom:8px;    
    padding:10px;
    text-transform:uppercase;
    line-height:160%;
    text-align:center;
    
}

ol.notes li.more_notes_link_container a {margin:auto;}


/*Pagination*/
.pg {
    text-align:center;
    margin:auto;
    margin-bottom:calc({select:post spacing} / 2);
    margin-top:calc(-{select:post spacing} / 2);
}

{block:ifmanualload}
span.thepages{display:none;}
{/block:ifmanualload}

a.append, ol.notes li.more_notes_link_container a {
    text-transform:uppercase;
    color:#5f5f5f;
    border-bottom:1px solid #eaeaea;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

a.append:hover, ol.notes li.more_notes_link_container a:hover , ol.notes li.more_notes_link_container a:active, ol.notes li.more_notes_link_container a:focus {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

#infscr-loading {display:none !important;}

/*Media Queries*/


@media screen and (max-width: 1100px) {
header.welcome .desc {
    padding:6px;
    padding-top:1%;
    height:50%;
    width:65%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
} 

.desc .myinfo  {
   padding:2%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;    
}

.desc .myinfo h2 {
    font-size:14px;
    margin-top:2%;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

}

/*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:10px;
    right:10px;
    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*/ 

    
</style>    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">

<!-- animsition.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>

<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>

<script>
$(document).ready(function() {
  
  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.a-link',
    loading: true,
    loadingParentElement: 'body',
    loadingClass: 'animsition-loading',
    loadingInner: '', 
    timeout: true,
    timeoutCountdown: 200,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
  
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'
   });    
   
$(function() {
  $('.captions a').addClass('a-link');
}); 

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('#container').animate({
            scrollTop: target.offset().top
        }, 1000);
    }

});


}); 

</script>

<script>
// TABS SHORTCODE

$(function(e) {

	$('.tabcont').hide().filter(':first').show();

	$('.topbar a[data-tabs]').on('click', function () {
		
		$(this).siblings().removeClass('active');
		$('.tabcont').hide();

		var tab = $(this).data('tabs');
		$(this).addClass('active');
		$('#' + tab).fadeIn().show();
	});
    
    
    $(".topbar a").click(function(){
        var  cur =$(".topbar a").index(this);
        var elm = $('.tabcont:eq('+cur+')');
        elm.addClass("swashIn");
        setTimeout(function() {
              elm.removeClass("swashIn");
        }, 220);
    });

});
    
</script>

<script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>

<script> 

$(function(){ $('.unnested .posts').unnest({ 
    yourCaption: ".captions", //your caption selector, the div wrapping 
    wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
    newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
    originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
    tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
    tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
    usernameColon: false //if turned to false, removes the colon at the end of usernames
}); }); 
    
</script>
{block:ifmanualload}
<script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script><script>

// Calculate internal height (used for local scroll)
// this function is from the old localMode I think?
function infsrc_local_hiddenHeight(element) {
   var height = 0;
   jQuery(element).children().each(function() {
     height = height + jQuery(this).outerHeight(false);
   });
   return height;
}

jQuery.extend(jQuery.infinitescroll.prototype,{
   _nearbottom_local: function infscr_nearbottom_local() {
       var opts = this.options, instance = this,
           pixelsFromWindowBottomToBottom = infsrc_local_hiddenHeight(opts.binder)
               - jQuery(opts.binder).scrollTop() - jQuery(opts.binder).height();

       if (opts.local_pixelsFromNavToBottom == undefined){
           opts.local_pixelsFromNavToBottom = infsrc_local_hiddenHeight(opts.binder) +
		 jQuery(opts.binder).offset().top - jQuery(opts.navSelector).offset().top;
       }
       instance._debug('local math:', pixelsFromWindowBottomToBottom,
opts.local_pixelsFromNavToBottom);

       return (pixelsFromWindowBottomToBottom - opts.bufferPx < opts.local_pixelsFromNavToBottom);
   }
});    
</script><script>

// Infinite Scroll
$(function() {
    
var $container = $('#postc');
    $container.infinitescroll({
        
      loading: {
        finishedMsg: "<em>No more posts</em>",
        img: null,
        msg: null,
        msgText: "<em>Loading posts...</em>",
        
        finished: function () {$('.append').text('Load More'); },
        

      },
    
        behavior: 'local',
        binder: $('#postc'), 
        navSelector  : '.thepages',            
        nextSelector : '.thepages a:last',
        itemSelector : '.posts:not(.secs)',
        
    errorCallback: function () {$('.append').fadeOut();},
        
        bufferPx     : 600,

    }, 
        
    function( newElements ) {
           $( newElements ).find('.photo-slideshow').pxuPhotoset({
               lightbox: true,
               rounded: true,
               gutter: '0px',
               borderRadius: '0px',
               photoset: '.photo-slideshow',
               photoWrap: '.photo-data',
               photo: '.pxu-photo'
            });

var $newElems = $(newElements);
        var $newElemsIDs = $newElems.map(function(){ 
            return this.id; 
        }).get();
        console.log($newElems, $newElemsIDs);
        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs); 

$newElems.unnest({

    yourCaption: ".captions",  
    wrapName: ".tumblr_parent", 
    newCaptionUsername: false,
    originalPostCaptionUsername: false, 
    tumblrAvatars: true,
    tumblrAvatarClass: ".tumblr_avatar",
    usernameColon: false
    
});  
        
        
    });
    

    $container.infinitescroll('unbind');
        $('.append').on('click', function(e) {
      e.preventDefault();
      $container.infinitescroll('retrieve');
    }); 
    
});
</script>
{/block:ifmanualload}
    </head>
    
    <body class="animsition {select:post width} {select:post sat} {select:captions} {select:background}">
    
    
<div class="wrapper">
    <div id="container">

<!--FIXED TOPBAR-->
    <nav class="topbar">
        <a data-tabs="entries1" class="active">Home</a>
        <a data-tabs="entries2">Ask</a>
        <a data-tabs="entries3">Explore</a>
        {block:following}
        <a data-tabs="entries4">Blogroll</a>
        {/block:following}
        <a href="#topthing">Top</a>
    </nav>  
<!--END OF FIXED TOPBAR-->    
    
        <div class="contwrap">

<!--HERO HEADER-->        
<header class="welcome" id="topthing">
    <div class="desc">
        <h1>Welcome</h1>
        <div class="myinfo">
<h2><a href="/"title="refresh" class="a-link">{Title}</a></h2>       
<p>{block:description}{description}{/block:description}</p>     
        </div>
        <div class="showposts">
        
<!--SCROLL DOWN BUTTON-->        
    <a href="#things">
<svg class="lnr lnr-arrow-down-circle"><use xlink:href="#lnr-arrow-down-circle">
<symbol id="lnr-arrow-down-circle" viewBox="0 0 1024 1024"><title>arrow-down-circle</title><path class="path1" d="M830.336 881.538c91.869-91.869 142.464-214.016 142.464-343.938s-50.595-252.067-142.464-343.936-214.014-142.464-343.936-142.464-252.069 50.595-343.938 142.464-142.462 214.014-142.462 343.936 50.594 252.069 142.462 343.938 214.016 142.462 343.938 142.462 252.067-50.594 343.936-142.462zM51.2 537.6c0-239.97 195.23-435.2 435.2-435.2s435.2 195.23 435.2 435.2c0 239.97-195.23 435.2-435.2 435.2s-435.2-195.23-435.2-435.2z"></path><path class="path2" d="M504.499 837.299l204.8-204.8c9.998-9.995 9.998-26.206 0-36.203-9.997-9.998-26.206-9.998-36.203 0l-161.096 161.101v-526.997c0-14.138-11.461-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v526.997l-161.101-161.096c-9.995-9.998-26.206-9.998-36.203 0-4.997 4.997-7.496 11.547-7.496 18.099s2.499 13.102 7.501 18.099l204.8 204.8c9.997 10 26.202 10 36.198 0z"></path></symbol>    
</use></svg>        
    </a>
<!--END OF SCROLL DOWN BUTTON-->     

        </div>
    </div>
</header>
<!--END OF HERO HEADER--> 


<section id="things">


<!--POST CONTAINER-->
    <div class="tabcont" id="entries1">
    
<article id="postc">
{block:posts}
<div class="posts" id="{PostID}">
{block:Photo}
{LinkOpenTag}<img class="photop" src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Photoset}
{block:Video}
{Video-500}
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Video}

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

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

<div class="grammy">
<img src="https://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}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Quote}
<div class="quotes">“{Quote}”</div>
{block:Source}<div class="quotesrc">— {Source}</div>{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="captions txtps">{Body}</div>
{/block:Text}

{block:Answer}
<div class="askcont">
<div class="askimg"><a href="{AskerURL}" class="a-link"><img src="{AskerPortraitURL-64}"></a></div>
<div class="askmsg">{Asker}: {Question}</div>
</div>
<div class="captions txtps">{Answer}</div>
{/block:Answer}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines}
<article class="chatlines">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</article>
{/block:Lines}
{/block:Chat}

{block:Link}
<div class="linkp">
<a href="{Link}" class="a-link"></a>
<span class="lnr lnr-link"></span> {Name}
</div>
{block:Description}<div class="captions">{Description}</div>{/block:Description}
{/block:Link} 

{block:date}<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource} 

<div class="postfooter">
    <div class="postinfo">
    <div class="postdate"><a href="{Permalink}" class="a-link" {block:NoteCount}title="{NoteCountWithLabel}"{/block:NoteCount}><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a></div>
    
    </div>
   
   
{block:RebloggedFrom}
<div class="viasrc">
<a href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
{block:ContentSource}
/ <a href="{SourceURL}"  title="{ReblogRootName}" target="_blank">src</a>
{/block:ContentSource}
</div>
{/block:RebloggedFrom}   
    
<div class="socactions">
    <div class="rihrih">

<a href="{ReblogURL}" target="_blank" title="Reblog">
    <svg class="lnr lnr-redo"><use xlink:href="#lnr-redo">
    <symbol id="lnr-redo" viewBox="0 0 1024 1024"><path class="path1" d="M127.467 229.867c82.198-82.198 191.488-127.467 307.733-127.467 116.246 0 225.534 45.269 307.733 127.467s127.467 191.486 127.467 307.733v66.197l109.899-109.899c9.997-9.997 26.206-9.997 36.203 0 9.998 9.997 9.998 26.206 0 36.203l-153.6 153.6c-5 5-11.55 7.499-18.102 7.499s-13.102-2.499-18.101-7.499l-153.6-153.6c-9.998-9.997-9.998-26.206 0-36.203 9.997-9.997 26.206-9.997 36.203 0l109.898 109.899v-66.197c0-211.738-172.262-384-384-384-211.739 0-384 172.262-384 384 0 211.739 172.261 384 384 384 14.139 0 25.6 11.461 25.6 25.6s-11.461 25.6-25.6 25.6c-116.245 0-225.534-45.269-307.733-127.467s-127.467-191.488-127.467-307.733c0-116.246 45.269-225.534 127.467-307.733z"></path></symbol>
</use></svg>
</a>
    </div>
    
<div class="custom-like-button">
  {LikeButton size="12"}
  <span class="our_button">
<svg class="lnr lnr-heart"><use xlink:href="#lnr-heart">
    <symbol id="lnr-heart" viewBox="0 0 1024 1024"><path class="path1" d="M486.4 972.8c-4.283 0-8.566-1.074-12.434-3.222-4.808-2.67-119.088-66.624-235.122-171.376-68.643-61.97-123.467-125.363-162.944-188.418-50.365-80.443-75.901-160.715-75.901-238.584 0-148.218 120.582-268.8 268.8-268.8 50.173 0 103.462 18.805 150.051 52.952 27.251 19.973 50.442 44.043 67.549 69.606 17.107-25.565 40.299-49.634 67.55-69.606 46.589-34.147 99.878-52.952 150.050-52.952 148.218 0 268.8 120.582 268.8 268.8 0 77.869-25.538 158.141-75.901 238.584-39.478 63.054-94.301 126.446-162.944 188.418-116.034 104.754-230.314 168.706-235.122 171.376-3.867 2.149-8.15 3.222-12.434 3.222zM268.8 153.6c-119.986 0-217.6 97.614-217.6 217.6 0 155.624 120.302 297.077 221.224 388.338 90.131 81.504 181.44 138.658 213.976 158.042 32.536-19.384 123.845-76.538 213.976-158.042 100.922-91.261 221.224-232.714 221.224-388.338 0-119.986-97.616-217.6-217.6-217.6-87.187 0-171.856 71.725-193.314 136.096-3.485 10.453-13.267 17.504-24.286 17.504s-20.802-7.051-24.286-17.504c-21.456-64.371-106.125-136.096-193.314-136.096z"></path></symbol>
</use></svg>
  </span>
</div>
    
</div>    
    
</div>

{block:hastags}
<div class="tags">
{block:Tags}<a class="a-link" href="{TagURL}">#{Tag}</a>{/block:Tags}    
</div>
{/block:hastags} 

{block:notecount}
{block:permalinkpage}

<div class="posts notelist">
   {block:PostNotes}
    {PostNotes-64}
    {/block:PostNotes}    
</div>
{/block:permalinkpage}
{/block:notecount}

{/block:date}

</div>
{/block:posts}    
</article>


{block:indexpage}
{block:Pagination}


<div class="pg">
<span class="thepages">
{block:PreviousPage}<a class="a-link" href="{PreviousPage}"><span class="lnr lnr-chevron-left"></a>{/block:PreviousPage}    

 {block:CurrentPage}{CurrentPage}{/block:CurrentPage}
 / {TotalPages}

{block:NextPage}<a class="a-link" href="{NextPage}"><span class="lnr lnr-chevron-right"></a>{/block:NextPage}    
</span>

{block:ifmanualload}
<a class="append">Load More</a>
{/block:ifmanualload}

</div>


{/block:Pagination}
{/block:indexpage}


    </div>
<!--END OF POST CONTAINER-->    


<!--ASKBOX-->    
<div class="tabcont" id="entries2">
    <div class="posts secs">
    <h1>{AskLabel}</h1>
    <iframe frameborder="0" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="owlery"></iframe>     
    </div>       
</div>
<!--END OF ASKBOX-->


<!--INFO-->    
    <div class="tabcont" id="entries3">
<div class="posts secs">

<div id="abtcont">

<!--img to the left-->

<div id="abtprofile">
    <img src="{image:profile}">
    
    <!--Icon font links-->
    <aside>
<a href="{text:Link1 URL}" title="{text:Link1}">
    <span class="lnr {select:Link1 icon}"></span>
</a> 

<a href="{text:Link2 URL}" title="{text:Link2}">
    <span class="lnr {select:Link2 icon}"></span>
</a> 

<a href="{text:Link3 URL}" title="{text:Link3}">
    <span class="lnr {select:Link3 icon}"></span>
</a> 

<a href="{text:Link4 URL}" title="{text:Link4}">
    <span class="lnr {select:Link4 icon}"></span>
</a> 

<a href="{text:Link5 URL}" title="{text:Link5}">
    <span class="lnr {select:Link5 icon}"></span>
</a> 

<a href="{text:Link6 URL}" title="{text:Link6}">
    <span class="lnr {select:Link6 icon}"></span>
</a> 

    </aside>
    
</div>


<div id="abttxt">
<p class="abtdesc">
    {text:basic info}
</p>

<!--WRITE YOUR INFO HERE: BASIC HTML TAGS INCLUDED-->

<b>Bold.</b> 

<i>Italic.</i> 

<strike>Strike.</strike> 

<u>Underline.</u> Line break.<br> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.   
</p>

<blockquote>This is a blockquote</blockquote>

<p>This is a new paragraph</p>

<!--TO HERE!-->

</div>

</div>


</div>        
    </div> 
<!--END OF INFO-->    
    
{block:following}    
<!--BLOGROLL: ONLY WORKS IN PRIMARY BLOGS-->
<div class="tabcont" id="entries4">
<div class="posts secs">
<h1>Following</h1>
    <article class="broll">
    
{block:Followed}
<a href="{FollowedURL}" title="{FollowedName}"><img class="followed" src="{FollowedPortraitURL-96}"></a> 
{/block:Followed}

    </article>  
</div>        
    </div>    
<!--END OF BLOGROLL-->    
{/block:following}    

    
</section>
        </div>
    </div>
</div>
    

<!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
<div id="leo">
<a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
</div>
<!--END OF CREDIT-->   

<!--Topbar on scroll script-->
<script>
var wrap = $('#container');
wrap.on('scroll', function (e) {
    var headerheight = $('header.welcome').height(); 
    if (this.scrollTop >= (headerheight + 80)) {
        wrap.addClass('scrolledcont');
    } else {
        wrap.removeClass('scrolledcont');
    }
});     
 </script>
<!--Topbar on scroll script--> 


<!--Tooltips. It's placed here bc it's only compatible to jQuery 1.7-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
jQuery.noConflict();
(function($){
 
$(document).ready(function(){
 
$("a[title],img[title],[title]").style_my_tooltips({
 
tip_follows_cursor:true,
 
tip_delay_time:30,
 
tip_fade_speed:300,
 
attribute:"title"
 
});
 
});
 
})(jQuery); 
</script> 
<!--Tooltips-->

    </body>
</html>