Create a new version of paste:

<!DOCTYPE html>
<html class="{select:buggy fullscreen}">
<!--THEME 13 La Follia 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"> 
    <link rel="shortcut icon" href="{Favicon}">      
            <title>{Title}</title>
    
    <meta name="image:header" content="https://static.tumblr.com/57856bc880575a94992a1532cf3862cc/xbvpdcx/TWBo74ho4/tumblr_static_5q4w92fh4lgkos4ssss0k4c0g.jpg"> 
    
    <meta name="image:sidebar" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
    
    <meta name="image:info" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">
    
    <meta name="if:grid layout" content="">
    
    <meta name="if:show blogroll"content="">
    
    <meta name="if:show link 4" content="">
    <meta name="if:show link 5" content="">
    <meta name="if:show block 4"content="">
    <meta name="if:show block 5"content="">
    <meta name="if:show block 6"content="">

    <meta name="color:accent"content="#C04848">  
    <meta name="color:highlight"content="#40E0D0"> 
    
    <meta name="select:buggy fullscreen" content="def">
    <meta name="select:buggy fullscreen" content="safari_hack">
    
    <meta name="select:font size" content="16px" title="16px"> 
    <meta name="select:font size" content="14px" title="14px"> 
    <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="post500"title="500px"/>    
    <meta name="select:post width"content="post540"title="540px"/>
    <meta name="select:post width"content="post450"title="450px"/>
    <meta name="select:post width"content="post400"title="400px"/> 
    <meta name="select:post width"content="post350"title="350px"/>
    
    
    <meta name="select:post spacing" content="150px">
    <meta name="select:post spacing" content="60px">
    <meta name="select:post spacing" content="80px">
    <meta name="select:post spacing" content="100px">
    <meta name="select:post spacing" content="120px">   
    
<meta name="select:notes display" content="def_notes" title="default">
<meta name="select:notes display" content="txt_notes" title="text only">
<meta name="select:notes display" content="grid_notes" title="grid">  

<meta name="text:basic info" content="name, age, mbti">
    
    <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:footer info"content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
    
    <meta name="text:update title 1" content="Update 1">
    <meta name="text:update title 2" content="Update 2">
    <meta name="text:update title 3" content="Update 3">
    
    <meta name="text:update 1" content="write some updates here">
    <meta name="text:update 2" content="write some updates here">
    <meta name="text:update 3" content="write some updates here">
    
    
    <meta name="text:nav category 1" content="category 1">
    <meta name="text:nav category 2" content="category 2">
    <meta name="text:nav category 3" content="category 3">
    <meta name="text:nav category 4" content="category 4">
    <meta name="text:nav category 5" content="category 5">
    <meta name="text:nav category 6" content="category 6">    
    
    <meta name="text:navilink 1" content="link">
    <meta name="text:navilink 1 URL" content="/">
    <meta name="text:navilink 2" content="link">
    <meta name="text:navilink 2 URL" content="/">  
    <meta name="text:navilink 3" content="link">
    <meta name="text:navilink 3 URL" content="/">    
    <meta name="text:navilink 4" content="link">
    <meta name="text:navilink 4 URL" content="/">
    <meta name="text:navilink 5" content="link">
    <meta name="text:navilink 5 URL" content="/">  
    <meta name="text:navilink 6" content="link">
    <meta name="text:navilink 6 URL" content="/">        
    <meta name="text:navilink 7" content="link">
    <meta name="text:navilink 7 URL" content="/">
    <meta name="text:navilink 8" content="link">
    <meta name="text:navilink 8 URL" content="/">  
    <meta name="text:navilink 9" content="link">
    <meta name="text:navilink 9 URL" content="/">     
    <meta name="text:navilink 10" content="link">
    <meta name="text:navilink 10 URL" content="/">
    <meta name="text:navilink 11" content="link">
    <meta name="text:navilink 11 URL" content="/">  
    <meta name="text:navilink 12" content="link">
    <meta name="text:navilink 12 URL" content="/"> 
    <meta name="text:navilink 13" content="link">
    <meta name="text:navilink 13 URL" content="/">
    <meta name="text:navilink 14" content="link">
    <meta name="text:navilink 14 URL" content="/">  
    <meta name="text:navilink 15" content="link">
    <meta name="text:navilink 15 URL" content="/">    
    <meta name="text:navilink 16" content="link">
    <meta name="text:navilink 16 URL" content="/">
    <meta name="text:navilink 17" content="link">
    <meta name="text:navilink 17 URL" content="/">  
    <meta name="text:navilink 18" content="link">
    <meta name="text:navilink 18 URL" content="/">        
    <meta name="text:navilink 19" content="link">
    <meta name="text:navilink 19 URL" content="/">
    <meta name="text:navilink 20" content="link">
    <meta name="text:navilink 20 URL" content="/">  
    <meta name="text:navilink 21" content="link">
    <meta name="text:navilink 21 URL" content="/">     
    <meta name="text:navilink 22" content="link">
    <meta name="text:navilink 22 URL" content="/">
    <meta name="text:navilink 23" content="link">
    <meta name="text:navilink 23 URL" content="/">  
    <meta name="text:navilink 24" content="link">
    <meta name="text:navilink 24 URL" content="/">     
    
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">

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


<style type="text/css">

/*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-transform:scale(0.8);
-webkit-transform-origin:right;
-moz-transform:scale(0.8);
-moz-transform-origin:right;
-o-transform:scale(0.8);
-o-transform-origin:right;
-ms-transform:scale(0.8);
-ms-transform-origin:right;
transform:scale(0.8);
transform-origin:right;      
}

.tmblr-iframe.tmblr-iframe--app-cta-button.tmblr-iframe--loaded,iframe.tmblr-iframe--unified-controls.tmblr-iframe--loaded:not(.iframe-controls--desktop)  {display:none!important;} 

.tmblr-iframe-pushdown {padding-top: 0 !important;}

{block:permalinkpage}
iframe.tmblr-iframe--unified-controls {max-width:500px!important;}
{/block:permalinkpage}

*,
*::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;
}

::-webkit-scrollbar {
    width:12px;
    background:#fff;
}

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

::-webkit-scrollbar-thumb { background-color: {color:accent}; border:5px solid #f5f5f5; border-radius:1ex;}

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

html.safari_hack {height:100%;}

body, html {margin:0;padding:0;}

body {
    width: 100%;
    height: 100%;    
    font-size:{select:font size};
    line-height:180%;
    color:#222;
    overflow-x:hidden;
    background:#f3f3f3;
    font-family:'open sans',sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;     
    -webkit-animation:fadeIn ease-in 1.5s;
    -o-animation:fadeIn ease-in 1.5s;
    -moz-animation:fadeIn ease-in 1.5s;
    animation:fadeIn ease-in 1.5s;     
}

@-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; } }

a {
    text-decoration:none;
    color:inherit;
    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;       
}

.bigwrap {
    position:relative;
    bottom:0;
    left:0;
    overflow-x:hidden;
      /* enable smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;      
}

/*CSS tooltip*/

[tooltip], a[title] {
  position:relative;
}

a[title]::after, [tooltip]::after{z-index:3;}


[tooltip]::after {content: attr(tooltip);}
a[title]::after {content: attr(title);}

.topbar [tooltip]::after {font-size:12px;min-width:100px;}
.socs [tooltip]::after {min-width:80px;}

body.grid_notes .postnotes a[title]::after {display:none!important;}

[tooltip]::after,a[title]::after {
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: #fff;
    font-size:{select:font size};
    font-family:'open sans';
    text-transform:uppercase;
    text-align: center;
    font-style:normal;
    color: #222;
    font-weight:400;
    padding:2px;
    font-size: 10px;
    min-width: 140px;
    overflow:hidden;
    border-radius: 2px;
    pointer-events: none;
    opacity:0;
    box-shadow: 1px 1px 3px #eaeaea;
    
}

input[tooltip]::after {padding:8px;min-width:60px;letter-spacing:1.2px;}

[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
  margin-top:-12px;
}
[tooltip-position='bottom']::after,a[title]::after{
  top:100%;
  transform: translateX(-50%) translateY(0%);
}

[tooltip-position='bottom']::after {margin-top:6px;}

a[title]::after {margin-top:12px;}

[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:12px;
  transform: translateX(0%)   translateY(-50%);
}

[tooltip]:hover::after, a[title]:hover::after {
   opacity:1;
    
}


/*topbar*/
nav.topbar {
    position:fixed;
    background:#fff;
    height:80px;
    width:100%;
    z-index:99;
    text-align:center;
    top:0;
    left:0;
    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;
}


h1.heading, h2.heading {
    font-family:'playfair display',serif;
    letter-spacing:1.2px;
}

h1.heading {
    text-transform:uppercase;    
}

h1 {font-size:calc({select:font size} * 1.6);}
h2 {font-size:calc({select:font size} * 1.3);}


@media screen and (max-width: 800px) {
h1 {font-size:calc({select:font size} * 1.44);}
h2 {font-size:calc({select:font size} * 1.2);}
}

 @media screen and (min-width: 1440px) { 
h1 {font-size:calc({select:font size} * 1.8);}
h2 {font-size:calc({select:font size} * 1.5);}

 } 
 
 @media screen and (max-width: 360px) {
h1 {font-size:calc({select:font size} * 1.2);}
h2 {font-size:calc({select:font size} * 1.08);}
}

/*header*/
header {
    position:relative;
    width:100%;
    background-image: url('{image:header}');
    background-repeat: no-repeat;
    background-position: center; 
    background-size:cover;
}

html.def header {height:100vh;}
html.safari_hack header {height:100%;}

/*side slide*/

#burger-menu{
  display:none;
}

#sideslide {
    position: fixed;
    top: 0;
    left: -400px;
    z-index:100;
    width: 400px;
    height: 100%;
    padding: 50px 30px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
    text-align: center;

    background-color: #fff;
    

  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;
    justify-content:center;
    -webkit-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content:center;
    -webkit-box-align: center;
    -webkit-box-pack:center;
    
}

aside {
    max-width:300px;
}

aside h2 {font-size:{select:font size};}

aside img {width:160px;border-radius:2%;}

.s_desc {font-family:'lora';font-style:italic;text-align:justify;line-height:24px;margin-top:12px;margin-bottom:12px;}

.s_desc, .s_links {display:block;font-size:12px;width:160px;margin:auto;}

.s_links {text-align:left;}

.s_links span {
    display:block;
    float: left; 
    clear: left;     
    margin-top:calc({select:font size}/2);
    line-height:140%;
}

.s_links span:before {
    content: "×"; 
    padding-right:8px; 
    vertical-align:middle;
}

#burger-menu:checked ~ #sideslide {
    left: 0;
}

#burger-menu:checked ~ .bigwrap {
    margin-left: 400px;
}

#burger-toggle:focus {
    outline: none;
}

#burger-toggle {
    display:inline-block;
    position: fixed;
    
    top:12px;
    left:12px;
    z-index:100;

    width: 51px;
    height: 51px;

    cursor: pointer;

    border: none;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #fff;
      -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}
#burger-toggle:before,
#burger-toggle:after {
    position: absolute;

    content: "";

    background-color: #222;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

#burger-toggle:hover:before, #burger-toggle:hover:after {
    background-color:{color:accent};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

#burger-toggle:before {
    top: 12px;
    left: 25px;

    width: 1px;
    height: 27px;
}
#burger-toggle:after {
    top: 25px;
    left: 12px;

    width: 27px;
    height: 1px;
}

#burger-menu:checked ~ .bigwrap #burger-toggle {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}

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

#sideslide {
    left:-100%;
    width:100%;
}


#burger-menu:checked ~ .bigwrap {
    margin-left: 100%;
}

}

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

nav.topbar {height:120px}
#burger-toggle {top:36px;}

}

section {
    position:relative;
}


{block:ifgridlayout}
{block:indexpage}
section { 
    column-count: 3;
    column-gap: 32px;
    padding:4%;
    padding-top:60px;
	-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;  
}

article.posts { 
    display: inline-block;
    margin: 0 0 32px;
    width: 100%;
}


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

section { 
    column-count: 2;
    column-gap: 24px;
}

article.posts { 
    margin:0 0 24px;
}

}

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

section { 
    column-count: 1;
    column-gap: 0;
}

article.posts { 
    margin:calc({select:post spacing}/2) auto;
    position:relative;
}

}

@media screen and (min-width: 1440px) {
section { 
    column-gap: 60px;
}

article.posts { 
    margin:0 0 60px;
}
}


{/block:indexpage}

{block:permalinkpage}
article.posts {
    width:500px;
    margin:120px auto;
    position:relative;
}
{/block:permalinkpage}
{/block:ifgridlayout}

article.posts {
    {block:ifnotgridlayout}
    margin:{select:post spacing} auto;
    position:relative;    
    {/block:ifnotgridlayout}
    overflow-x:hidden;
    overflow-y:hidden;

}

html.safari_hack article.posts {    left:6px;    }

{block:ifnotgridlayout}

.post540 article.posts {width:540px;}
.post500 article.posts {width:500px;}
.post450 article.posts {width:450px;}
.post400 article.posts {width:400px;}
.post350 article.posts {width:350px;}

{/block:ifnotgridlayout}

{block:ifnotgridlayout}
 @media screen and (max-width: 600px) {

article.posts {
    width:90%!important;
    
}

html.safari_hack article.posts {    left:0;   }

}
{/block:ifnotgridlayout}

.posts > div.captions, .posts > .pads {
    text-align:justify;
    padding:calc({select:font size} * 2);
    background:#fff;
    word-wrap:break-word;
}

.captions *:not(h1):not(h2) {font-size:inherit;}

.npf_row {
    display:flex;
}

.npf_row figure {margin-top:0;}
.npf_row:first-of-type {margin-top:12px;}
.npf_row > figure {
    flex: 1;
    padding:2px;
}

.captions figure:not(.tmblr-full) {margin-left:0;margin-right:0;margin-top:{select:font size};}

.posts iframe, .posts li, .posts pre, .posts embed, .posts video, .posts object .posts blockquote {max-width:100% !important;}

.posts ol, .posts ul {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
.posts ol {
  list-style: decimal inside;
}

.posts ul {
  list-style: circle inside;
}

.posts li {margin-bottom:calc({select:font size} / 2);}

.posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  margin:{select:font size} 0 {select:font size} 0;
}

.posts pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
background:#fafafa;
padding:5px;
}

.posts h1, .posts h2 {
    font-family:'lora';
}

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

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

.posts blockquote {
  border-left: 1px solid #cdcdcd;
  margin-left: 0;
  margin-right: 0;
  padding-left: calc({select:font size} * 1.5);
}

.posts blockquote *:last-child {
  margin-bottom: 0;
}


.posts .captions *:first-child {
    margin-top:0;
}

.posts blockquote blockquote {
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 border-left:none;
    
}

aside a, .captions a, .ask_cont > span a, .tab_iu a  {
    border-bottom:1px solid #222;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

aside a:hover, .captions a:hover, .tab_iu a:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

a.read_more {
    font-family:'lora';
    font-style:italic;
    font-weight:bold;
    vertical-align:middle;
    
}

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

h1.qshort, h1.qmedium, h1.qlong {font-style:italic;margin:0;font-weight:400;}

h1.qshort:first-letter, h1.qmedium:first-letter, h1.qlong:first-letter{border-bottom:none!important;}

h1.qshort {line-height:140%;font-size:calc({select:font size} * 2);}
h1.qmedium, h1.qlong {line-height:160%;}

h1.qmedium {font-size:calc({select:font size} * 1.5);}

h1.qlong {font-size:calc({select:font size} * 1.2);}

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

h1.qshort {line-height:140%;font-size:calc({select:font size} * 1.6);}
h1.qmedium, h1.qlong {line-height:160%;}

h1.qmedium {font-size:calc({select:font size} * 1.44);}

h1.qlong {font-size:calc({select:font size} * 1.2);}

}

span.qsource {width:100%;display:block;text-align:center;margin-top:16px;}

.divider {
    margin-top:16px;
    text-align:center;
}

.sb .divider {margin-top:12px;}
 
.divider::before {
    width:20%;
    height:1px;
    background-color:{color:highlight};
    content:"";
    display:inline-block;
    vertical-align:middle;
}

/*chats*/
ul.chatlines {list-style:none;}
li.clines {padding:8px;margin-top:0;margin-bottom:0;}
.chatlines li.odd {background:#fafafa;}

/*ask posts*/

.ask_cont {line-height: 1.8;min-height:124px;border-bottom:1px solid #eaeaea;}

.ask_cont > img {float:left;border-radius:5%;margin-right:24px;}

.ask_cont > span {font-weight:bold;}


.ask_cont > span a:hover {
    color:{color:accent};
    border-bottom:1px solid {color:accent};
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

 @media screen and (max-width: 360px) {
.ask_cont > img {width:48px;height:48px;margin-right:16px;}
}


/*link posts*/
.link_cont {
    border-bottom:1px solid #eaeaea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;       
}

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

.link_cont span {margin-right:16px;}

.link_cont:hover .plink a {color:#fff;}

h1.plink {margin:0;font-style:italic;}

h1.plink a {color:inherit;}


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


#tumblr_lightbox img,.tmblr-lightbox .vignette {
    opacity:0;
    -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 { 
    box-shadow: 0 0 0 transparent !important;
}

#tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
    border-radius:0!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -o-border-radius: 0!important;   
    background:transparent !important;
    padding:0 !important;
}


#tumblr_lightbox_caption,.tmblr-lightbox .lightbox-caption { visibility: hidden; }

/*photoset fix*/

div.html_photoset {width:100.48%!important;}

div.html_photoset > iframe {display:block!important;background:#fff!important;}


.audio_cont {
    position:relative;
    width:100%;
    font-size:90%;
    margin-bottom:0;
    border-bottom:1px solid #eaeaea;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;     
}


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


.playback: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;    
}


.audio_cover {
    position:relative;
    margin-left:0;
    width:120px;
    height:120px;    
}

.audio_info {
    padding:0;
    margin-left:0px;
    background:#fff;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center; 
    width:calc(100% - 120px);
    height:120px;      
}

.audio_info > div {
    font-weight:normal;
    text-overflow: ellipsis;    
    white-space: nowrap;
    overflow:hidden;
    max-width:calc(100% - 50px);      
}

/*post info*/

div.post_footer {
    padding:calc({select:font size}*2);
    background:#fff;
    border-top:1px solid #eaeaea;
    font-family:'playfair display';
    letter-spacing:1.2px;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:justify;
      justify-content:space-between;       
      
}

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

div.post_footer {
    font-size:12px;      
      
}

}

span.dtls:first-child {font-weight:700;}

div.datesourcetag {
    font-size:96%;
font-style:italic;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
    align-items:center;
    -webkit-align-items:center;
    -moz-align-items:center;
    -ms-align-items:center;      
}

div.datesourcetag > span + span {
    margin-left:20px;
}

span.dtls:first-of-type {margin-left:0;font-style:normal;}


div.socs {
        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;
}

div.soc_obj {
  margin-left:16px;
}

.custom-like-button {
  position: relative;
  display: block;
  width: {select:font size};
  height: {select:font size};
}

/* 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;
  margin-top:calc(-{select:font size}/3);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.our_button span {color:#222;}

.like_button:hover + .our_button span, .like_button.liked + .our_button span {
  color: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:{select:font size};
    font-family:'lora';
    word-wrap:break-word;
}

{block:ifnotgridlayout}
 @media screen and (max-width: 600px) {

.tags {font-size:90%;}

}
{/block:ifnotgridlayout}

{block:ifgridlayout}
.tags{font-size:80%;margin-top:calc({select:font size}/2);}
@media screen and (min-width: 1440px) {
    .tags {font-size:100%;margin-top:{select:font size};}
}

{/block:ifgridlayout}
 
.tags a {
    display:inline;
    margin-left:12px;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.tags a:hover {
    color:{color:accent};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}
 
.tags a:first-of-type {margin-left:0;}

/*notes*/

.postnotes .pads {border-bottom:1px solid #eaeaea;}
h1.notehead {margin:0;}

div.tumblr_notes {
    background:#fff;
    padding:calc({select:font size} * 2);
    font-size:90%;
}

/*Grid notes*/

.grid_notes h1.notehead {padding:calc({select:font size} * 2);}
.grid_notes .postnotes *{    margin:0;    padding:0; } 

.grid_notes .postnotes { text-align: center; } 

.grid_notes ol.notes {margin-top:calc({select:font size});padding: {select:font size};}

.grid_notes .postnotes li{    list-style-type:none;    display:inline-block;    width:calc({select:font size} * 3);    height:calc({select:font size} * 3);        margin: 8px 12px;   overflow:hidden; } 

.grid_notes .postnotes img{    width:calc({select:font size} * 3);    height:calc({select:font size} * 3); border-radius:5%;} 

.grid_notes li.more_notes_link_container{
    width:100%!important;
} 

/*def & txt notes*/
.postnotes {text-align:justify;}

.def_notes .postnotes ol.notes, .txt_notes .postnotes ol.notes{list-style:none;margin:0;padding-left:5px;}

.def_notes .postnotes ol.notes li.note, .txt_notes .postnotes ol.notes li.note {
    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;    
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;    
    margin:{select:font size} 0 {select:font size} 0;
}

.def_notes .postnotes ol.notes li.note.reply span.action, .txt_notes .postnotes ol.notes li.note.reply span.action {
margin-top:calc(-{select:font size}/2);    

}

.def_notes .postnotes ol.notes li.note.reply, .txt_notes .postnotes ol.notes li.note.reply 
{
    -webkit-box-align:start;
        -ms-flex-align:start;
            align-items:flex-start;
}

.def_notes .postnotes ol.notes li.note:first-of-type, .txt_notes .postnotes ol.notes li.note:first-of-type {margin-top:8px;}

.def_notes .postnotes li.note:last-of-type, .txt_notes .postnotes li.note:last-of-type {margin-bottom:8px;}

.def_notes .postnotes ol.notes li.note a.avatar_frame {height:24px;margin-right:{select:font size};}

.txt_notes .postnotes ol.notes li.note a.avatar_frame {display:none;}


.def_notes .postnotes ol.notes li.note img.avatar {
    border-radius:5%;
    width:24px;
    height:24px;
       
}


.postnotes ol.notes li.note img.avatar {
    display:block;
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.txt_notes .postnotes ol.notes li.note img.avatar {display:none;}

.postnotes ol.notes li.note img.avatar:hover {
    opacity:0.7;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

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

.txt_notes .postnotes ol.notes li.note span.action {max-width:100%;}

.def_notes .postnotes li.with_commentary blockquote, .txt_notes .postnotes li.with_commentary blockquote {
} 


li.note span.action a, .qsource a {
    border-bottom:1px solid #eaeaea;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

li.note span.action a:hover, .qsource a:hover {
    border-bottom:1px solid {color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.txt_notes li.note span.action:before {
    font-family: 'Linearicons-Free';   
    margin-right:8px;
    vertical-align: middle;
}

.txt_notes li.note.reply span.action:before {
    content: "\e83f";
    color:#6CC7ED;
}

.txt_notes li.note.like span.action:before {
    content: "\e813";
    color:red;
}

.txt_notes li.note.original_post span.action:before {
    content: "\e814";
    color:#EED275;    
}

.txt_notes li.note.reblog:not(.original_post) span.action:before  {
    font-family: 'Linearicons-Free';  
    content: "\e862";
    color:#72D16E;    
}

li.more_notes_link_container {margin-top:calc({select:font size} * 2)!important;}
.def_notes li.more_notes_link_container a, .grid_notes li.more_notes_link_container a, .txt_notes li.more_notes_link_container a {
    font-size:calc({select:font size} * 1.2);
    margin:auto;
    cursor:help;
    color:inherit; 
    border-bottom:1px solid #222;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;       
}


li.more_notes_link_container a:hover {color:{color:highlight};border-bottom:1px solid {color:highlight};}

li.note span.action a:hover{
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

/*pagination*/
.pg {
    margin:auto;
    {block:ifnotgridlayout}
    margin-top:calc(-{select:post spacing} / 2);
    margin-bottom:calc({select:post spacing} / 2);
    {block:ifnotgridlayout}
    width:100%;
    color:inherit;    
    text-transform:uppercase;
    letter-spacing:1.5px;
    background:transparent; 
    text-align:center;
    word-spacing:20px;
    {block:ifgridlayout}
    position:relative;
    margin-top:calc({select:post spacing} * (0.6));
    margin-bottom:calc({select:post spacing} * (0.6));
    {/block:ifgridlayout}
}

.pg a {
    display:inline-block;
    color:inherit;
    border-bottom:1px solid #222;
} 

.pg a:hover {
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
}

.pg a.arrs {border-bottom:none!important;}


.pg a:hover {
    color:{color:highlight};
}


.pg > * + * {margin:6px;}


html.def footer {height:100vh;}
html.safari_hack footer {height:100%;}

footer {
    width:100%;
    background:#fff;
    position:relative;
    overflow:hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -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;    
}

.slider__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid {color:highlight};
  outline-offset: -6px;
  box-shadow: 0 0 0 0 {color:accent}, 0 0 0 0 rgba(150, 150, 150, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
  left: -300%;
}
.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  {block:ifshowblogroll}
  width: 400%;
  {/block:ifshowblogroll}
  {block:ifnotshowblogroll}
  width:300%;
  {/block:ifnotshowblogroll}
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -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;
}

.slider__contents > h2 {max-width:500px;}

div.tab_wrap {
    max-height:calc(100% - 15rem);
    width:500px;
    overflow:auto;
    overflow-x:hidden;
}


@media screen and (max-width: 500px) {
.slider__contents > h2 {max-width:100%;}
div.tab_wrap {width:100%;}

iframe#askbox {width:100%!important;height:250px!important;}

}

@media screen and (max-width: 800px) {
    div.tab_wrap {
        max-height:calc(100% - 9rem);
    }
}

 @media screen and (min-width: 1440px) { 
.slider__contents > h2 {max-width:800px;}
div.tab_wrap {width:800px}

 } 


div.tab_wrap::-webkit-scrollbar {
    width:2px;
    background:#fff;
}

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

div.tab_wrap::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:none; border-radius:1ex;}

/*Info + Updates*/

.tab_iu {padding:0.5rem;}

.tab_info, .tab_upd {text-align:justify;}

.tab_info {
    margin-top:1rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
   justify-content: space-between;    
}

.tab_info > div > img {
    width:96px;
    border-radius:2%;
}

.tab_txt {
    font-family:'lora';
    font-style:italic;
    width:calc(100% - 96px - 1rem);
    padding-left:1rem;
}

.tab_upd {margin-top:1rem;}

.tab_upd b.updt {font-family:'lora'}

@media screen and (max-width: 360px) {
.tab_info > div > img {
    display:none;
}

.tab_txt {
    width:100%;
    padding-left:0;
}

}

@media screen and (min-width: 1440px) {
.tab_info > div > img {
    width:128px;
}

.tab_txt {
    width:calc(100% - 128px - 1rem);
}

}

/*Navi*/

.navigrid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap; 
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.navi-items {
    text-align:left;
    -ms-flex-preferred-size:33%;
    -webkit-flex-basis:33%;
    flex-basis:33%;
}

 @media screen and (min-width: 1440px) { 
.navi-items {
    -ms-flex-preferred-size:calc(25% - 0.5rem);
    -webkit-flex-basis:calc(25% - 0.5rem);
    flex-basis:calc(25% - 0.5rem);
}

 } 

@media screen and (max-width: 600px) {
    
.navi-items {
    -ms-flex-preferred-size:calc(50% - 1rem);
    -webkit-flex-basis:calc(50% - 1rem);
    flex-basis:calc(50% - 1rem);
}


}

@media screen and (max-width: 480px) {
    
.navi-items {
    -ms-flex-preferred-size:100%;
    -webkit-flex-basis:100%;
    flex-basis:100%;
}


}

.navi-items h6 {
    font-size:{select:font size};
    font-family:'playfair display';
    
}

.navi-items > ul {
    padding-left:0;
    list-style:none;
    font-family:'lora';
}

.navi-items > ul > li {
    margin-top:0.5em;
    padding-left:1em;
    position:relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.navi-items > ul > li > a {
    margin-left:calc({select:font size}/2);
    border-bottom:1px solid #eaeaea;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;        
}

.navi-items > ul > li > a:hover {
    color:{color:accent};
    border-bottom:1px solid {color:accent};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;        
}

.navi-items > ul > li:before {
    content:'';
    position:absolute;
    top:50%;
    height:1px;
    margin-left:-1em;
    width:1em;
    background:#999;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.navi-items > ul > li:hover {
    padding-left:1.8em;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

.navi-items > ul > li:hover:before {
    margin-left:-1.8em;
    width:1.8em;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

/*blogroll*/

.tab_wrap.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;     
}

.broll > a {
    
    margin:24px;
    -ms-flex-preferred-size:calc(25% - 48px);
    -webkit-flex-basis:calc(25% - 48px);
    flex-basis:calc(25% - 48px);
}

@media screen and (max-width: 800px) { 
.broll > a {
    margin:16px;
    -ms-flex-preferred-size:calc(25% - 32px);
    -webkit-flex-basis:calc(25% - 32px);
    flex-basis:calc(25% - 32px);
}

 } 
 
 @media screen and (min-width: 1440px) { 
.broll > a {
    margin:32px;
    -ms-flex-preferred-size:calc(20% - 64px);
    -webkit-flex-basis:calc(20% - 64px);
    flex-basis:calc(20% - 64px);
}

 } 


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

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


@-webkit-keyframes check {
  50% {
    outline-color: {color:accent};
    box-shadow: 0 0 0 12px {color:accent}, 0 0 0 36px rgba(150, 150, 150, 0.2);
  }
  100% {
    outline-color: {color:accent};
    box-shadow: 0 0 0 0 {color:accent}, 0 0 0 0 rgba(150, 150, 150, 0);
  }
}

@keyframes check {
  50% {
    outline-color: {color:accent};
    box-shadow: 0 0 0 12px {color:accent}, 0 0 0 36px rgba(150, 150, 150, 0.2);
  }
  100% {
    outline-color: {color:accent};
    box-shadow: 0 0 0 0 {color:accent}, 0 0 0 0 rgba(150, 150, 150, 0);
  }
}

/*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:20px;
    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>
    </head>
<body class="{select:post width} {select:notes display}">

<nav class="topbar">
    <h1 class="heading">
        <a href="/" tooltip="refresh" tooltip-position="right">{Title}</a>
    </h1>
</nav>

<input id="burger-menu" type="checkbox" />

<nav id="sideslide" role="navi">

<aside>
    <h2 class="heading">{text:basic info}</h2>
    <img src="{image:sidebar}">
<!--desc and links-->  

{block:description}
<div class="s_desc">
    {description}
</div>
{/block:description}

<div class="s_links">
  <span><a href="{text:Link1 URL}">{text:Link1}</a></span>
  <span><a href="{text:Link2 URL}">{text:Link2}</a></span>  
  <span><a href="{text:Link3 URL}">{text:Link3}</a></span>  
 
 {block:ifshowlink4}
  <span><a href="{text:Link4 URL}">{text:Link4}</a></span>  
 {/block:ifshowlink4}
 
 {block:ifshowlink5} 
  <span><a href="{text:Link5 URL}">{text:Link5}</a></span>     
 {/block:ifshowlink5} 
    
</div>

</aside>
    
</nav>


<div class="bigwrap">

<label for="burger-menu" id="burger-toggle"></label>

<div class="wrapper" role="main">
    
<!--header-->
<header class="welc">
    
</header>
<!--/header-->

<section>


{block:posts}
<article class="posts">

<!--Ask post-->
{block:Answer}
<div class="ask_cont pads">

<img src="{AskerPortraitURL-64}">

       <span>{Asker}:</span> {Question}

</div>
    <div class="captions">
        {Answer}
    </div>
{/block:Answer}
<!--/Ask post--> 

<!--Chat-->
{block:chat}
<div class="pads">
{block:title}<h1>{Title}</h1>{/block:title}
<ul class="chatlines">
{block:Lines}
<li class="clines {Alt}">
{block:Label}<b>{Label}</b>{/block:Label} 
{Line} 
</li>
{/block:Lines}    
</ul>    
</div>
{/block:chat}
<!--/Chat-->

<!--Quote-->
{block:Quote}
    <div class="pads">
<h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>

{block:Source}

<div class="divider"></div>

<span class="qsource">{Source}</span>{/block:Source}        
    </div>
{/block:Quote}
<!--/Quote-->

<!--Link-->
{block:link}
<div class="pads link_cont">
<h1 class="plink"><a href="{URL}"><span class="lnr lnr-link"></span> {Name}</a></h1>    
</div>
{block:Description}
<div class="captions">{Description}</div>
{/block:Description}
{/block:link}
<!--/Link-->

<!--Text--> 
{block:text}
{block:title}<h1>{Title}</h1>{/block:title}
<div class="captions">{body}</div>
{/block:text}
<!--Text-->

<!--Photo post-->   
   {block:photo}

<img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto">

{block:Caption}<div class="captions">{Caption}</div>{/block:Caption} 
  
   {/block:photo}
<!--/Photo post--> 

<!--Photoset post-->
{block:Photoset}
{Photoset}

{block:Caption}<div class="captions">{Caption}</div>{/block:Caption} 

{/block:Photoset}
<!--/Photoset post-->

{block:Video}
{Video-700}
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Video}

<!--Audio-->
{block:Audio}
<div class="audio_cont">
    <div class="audio_cover">

    <div class="playback">
        <div class="playbox">{AudioPlayerWhite}</div>
    </div>
    
<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="audio_info">
        <div>
{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}
<!--/Audio-->


{block:date}
<div class="post_footer">
    <div class="datesourcetag">
    
<span class="dtls">
<a tooltip="{TimeAgo}" tooltip-position="top" href="{Permalink}"><span class="lnr lnr-clock"></span> {ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a>     </span>

<span class="dtls">
{block:RebloggedFrom}
<a href="{ReblogParentURL}" tooltip="{ReblogParentName}"tooltip-position="top" target="_blank">via</a>
{block:ContentSource}
/ <a href="{SourceURL}"  tooltip="{ReblogRootName}" tooltip-position="top" target="_blank">src</a>
{/block:ContentSource}
{/block:RebloggedFrom}      
</span>


    </div>
    <div class="socs">
        
<div class="soc_obj">
<a tooltip="reblog"tooltip-position="top" class="a-link"href="{ReblogURL}"><span class="lnr lnr-sync"></span></a>    
</div>        

<div class="custom-like-button soc_obj">
  {LikeButton size="12"}
  <span class="our_button">
<span class="lnr lnr-heart"></span>
  </span>
</div>
        
    </div>
</div>

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

{/block:date}
    
</article>

<!-- {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} 

{block:permalinkpage}
{block:NoteCount} 
<article class="posts postnotes">
<div class="pads">
<h1 class="notehead">{NoteCountWithLabel}</h1>    
</div>

<div class="tumblr_notes">
{block:PostNotes}{PostNotes-64}{/block:PostNotes}      
</div>

</article>
{/block:NoteCount}
{/block:permalinkpage}

{/block:posts}

    
</section>   

{block:indexpage}
<!--pagination-->
{block:pagination}
<div class="pg">
{block:PreviousPage}<a class="a-link arrs" href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<span class="current"><em>{PageNumber}</em></span>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page a-link" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a class="a-link arrs" href="{NextPage}">&raquo;</a>{/block:NextPage}
</div>
{/block:pagination}
<!--/pagination-->  

{/block:indexpage}   


<footer>

  <input type="radio" name="slider" tooltip="FAQ"tooltip-position="top" checked="checked" class="slider__nav"/>
  <input type="radio" name="slider" tooltip="Info"tooltip-position="top" class="slider__nav"/>
  <input type="radio" name="slider" tooltip="Navi"tooltip-position="top" class="slider__nav"/>
  
  
  {block:ifshowblogroll}
    {block:Following}
  <input type="radio" name="slider" tooltip="Blogroll"tooltip-position="top" class="slider__nav"/>
    {/block:Following}
  {/block:ifshowblogroll}  
  

  <div class="slider__inner">
    <div class="slider__contents">
<h2 class="heading">{AskLabel}</h2>    
    <p>

<iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>     
        
    </p>  
    </div>

    <div class="slider__contents">

<h2 class="heading">Info / Updates</h2>

<div class="tab_wrap tab_iu">
    <div class="tab_info">
        <div><img src="{image:info}"></div>
        <div class="tab_txt">
            {text:footer info}
        </div>
    </div>
    
    <div class="tab_upd">
    <p class="upd_line"><b class="updt">{text:update title 1}:</b> {text:update 1}</p>
    <p class="upd_line"><b class="updt">{text:update title 2}:</b> {text:update 2}</p>
    <p class="upd_line"><b class="updt">{text:update title 3}:</b> {text:update 3}</p>
    </div>
    
</div>

    </div>

    <div class="slider__contents">
<h2 class="heading">Navigation</h2>

<div class="tab_wrap navigrid">
<div class="navi-items">
<h6>{text:nav category 1}</h6>

<ul>
   <li><a href="{text:navilink 1 URL}">{text:navilink 1}</a></li> 
   <li><a href="{text:navilink 2 URL}">{text:navilink 2}</a></li>
   <li><a href="{text:navilink 3 URL}">{text:navilink 3}</a></li>
   <li><a href="{text:navilink 4 URL}">{text:navilink 4}</a></li>
</ul>
    
    
</div>

<div class="navi-items">
<h6>{text:nav category 2}</h6>

<ul>
   <li><a href="{text:navilink 5 URL}">{text:navilink 5}</a></li> 
   <li><a href="{text:navilink 6 URL}">{text:navilink 6}</a></li>
   <li><a href="{text:navilink 7 URL}">{text:navilink 7}</a></li>
   <li><a href="{text:navilink 8 URL}">{text:navilink 8}</a></li>
</ul>   
</div>

<div class="navi-items">
<h6>{text:nav category 3}</h6>

<ul>
   <li><a href="{text:navilink 9 URL}">{text:navilink 9}</a></li> 
   <li><a href="{text:navilink 10 URL}">{text:navilink 10}</a></li>
   <li><a href="{text:navilink 11 URL}">{text:navilink 11}</a></li>
   <li><a href="{text:navilink 12 URL}">{text:navilink 12}</a></li>
</ul>
    
</div> 

{block:ifshowblock4}
<div class="navi-items">
<h6>{text:nav category 4}</h6>

<ul>
   <li><a href="{text:navilink 13 URL}">{text:navilink 13}</a></li> 
   <li><a href="{text:navilink 14 URL}">{text:navilink 14}</a></li>
   <li><a href="{text:navilink 15 URL}">{text:navilink 15}</a></li>
   <li><a href="{text:navilink 16 URL}">{text:navilink 16}</a></li>
</ul>
    
    
</div>
{/block:ifshowblock4}

{block:ifshowblock5}
<div class="navi-items">
<h6>{text:nav category 5}</h6>

<ul>
   <li><a href="{text:navilink 17 URL}">{text:navilink 17}</a></li> 
   <li><a href="{text:navilink 18 URL}">{text:navilink 18}</a></li>
   <li><a href="{text:navilink 19 URL}">{text:navilink 19}</a></li>
   <li><a href="{text:navilink 20 URL}">{text:navilink 20}</a></li>
</ul>   
</div>
{/block:ifshowblock5}

{block:ifshowblock6}
<div class="navi-items">
<h6>{text:nav category 6}</h6>

<ul>
   <li><a href="{text:navilink 21 URL}">{text:navilink 21}</a></li> 
   <li><a href="{text:navilink 22 URL}">{text:navilink 22}</a></li>
   <li><a href="{text:navilink 23 URL}">{text:navilink 23}</a></li>
   <li><a href="{text:navilink 24 URL}">{text:navilink 24}</a></li>
</ul>
    
</div> 
{/block:ifshowblock6}

</div>
    </div>

{block:Following} 

{block:ifshowblogroll}
    <div class="slider__contents">
<h2 class="heading">Blogroll</h2>

<div class="tab_wrap broll">

{block:Followed}

<a href="{FollowedURL}" tooltip="{FollowedName}"tooltip-position="bottom"><img class="followed" src="{FollowedPortraitURL-128}"></a>

{/block:Followed}
    
    
</div>
    </div>
{/block:ifshowblogroll}

{/block:Following}

  </div>
    
</footer>
    
    
</div>

    
</div>


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


</body>    
</html>