Create a new version of paste:

<!DOCTYPE html>
<html>
<!--THEME 14 Fugue 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>
        <title>{Title}</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{Favicon}">  
    
    <meta name="image:sidebar" content="https://static.tumblr.com/d0969d484613dddeaa37858ff409d517/xbvpdcx/5dHo1k18h/tumblr_static_2cevhqn6pl34ggs8k8wg0g848.jpg">    
    
    <meta name="if:show block 4"content="">
    <meta name="if:show block 5"content="">
    <meta name="if:show block 6"content="">
    <meta name="if:show blogroll"content="">
    
    <meta name="color:accent"content="#C04848">  
    <meta name="color:highlight"content="#40E0D0">    
    <meta name="color:grad1" content="#fafafa">
    <meta name="color:grad2" content="#cdcdcd">
    
    <meta name="select:background"content="simple_bg" title="simple">
    <meta name="select:background"content="grad_bg" title="gradient">
    <meta name="select:background"content="white_bg" title="white">    
    
    <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="post700"title="700px"/> 
    <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: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:notes display" content="def_notes" title="default">
<meta name="select:notes display" content="grid_notes" title="grid">    

    <meta name="text:basic info" content="name, age, mbti">
    
    <meta name="text:info text" content="Lorem Ipsum">
    
    <meta name="text:question 1" content="This is a question?">
    <meta name="text:answer 1" content="This is an answer.">
    <meta name="text:question 2" content="This is a question?">
    <meta name="text:answer 2" content="This is an answer.">
    <meta name="text:question 3" content="This is a question?">
    <meta name="text:answer 3" content="This is an answer.">    
  
    <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=EB+Garamond:400,400i,700,700i" rel="stylesheet">    

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<link href="https://static.tumblr.com/0podkko/bwepdyarh/photosets.css" 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}

#loading_overlay {
    position:fixed;
    width:100%;
    height:100%;
    z-index:200;
    top:-100%;
    left:0;
  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; 
    animation-name: fugue;
    animation-duration: 3s;  
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}


.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #222;
  border-color: #222 transparent #222 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fugue {
    0%   {top:0;}
    40% {top:0;}
    100% {top:-100%;}
}

aside * {
    margin:0;
    padding:0;
}

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

html, body, main {height:100%;width:100%;} 

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

body {
    line-height:160%;
    margin:0;
    padding:0;
    font-family:'EB Garamond',serif;
    font-size:{select:font size};
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
    color:#222;
}  

#loading_overlay,body {background-attachment:fixed;}

.simple_bg #loading_overlay, body.simple_bg {background:#efefef;}

.white_bg #loading_overlay,body.white_bg {background:#fff;}

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

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

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

::-webkit-scrollbar-thumb { background-color: {color:accent}; border-radius:1ex;}

::selection {background:{color:accent}; color:#fff;}
::-moz-selection {background:{color:accent};color:#fff;}
::-webkit-selection {background:{color:accent};color:#fff;}

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

/*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:'raleway';
    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;
}

.mobdesc a[title]::after, .mobdesc [tooltip]::after  {min-width:96px;}

.post350 .mobdesc a[title]::after, .post350 .mobdesc [tooltip]::after  {min-width:72px;}

.mobdesc [tooltip-position='top']::after {margin-top:8px;}

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


label[for] { cursor: help; }


h1, h2 {font-family:'raleway';font-weight:400;}

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

main#everything {
    display:block;
    height: 100%;
    opacity:100%;
  -webkit-transition: opacity .75s ease-out;
  transition: opacity .75s ease-out;    
}

aside {
    position:fixed;
    right:0;
    top:0;
    width:400px;
    height:100%;
    z-index:99;
    background:#fff;
    border-left:1px solid #f5f5f5;
  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;  
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

div#sidewrap {
    width:240px;
    text-align:center;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

div#sidewrap h2 {
    font-size:calc({select:font size}*1.25);
    margin-bottom:0.8rem;
}

div.sb_img img {
    width:100%;
    display:block;
    border-radius:2%;
    opacity:1;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;    
}

div.sb_img a:hover img {
    opacity:0.7;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;    
}

div.sb_desc {
    margin-top:1.6rem;
    margin-bottom:0.8rem;
    text-align:justify;
    padding:0.5rem 0 0.5rem 0;
    border-top:1px solid #eaeaea;
    border-bottom:1px solid #eaeaea;
    
}

nav.navtabs {
    margin-top:0.8rem;
    text-align:left;
}


.navtabs ul {
    list-style:none;
}

.navtabs ul li:before {
  content: "\00D7";
  padding-right:8px;
}

.navtabs label {
    color:#999;
    border-bottom:1px solid #eaeaea;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;       
}

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


#posts_tab:checked ~ aside .label_posts,
#fask_tab:checked ~ aside .label_fask,
#navi_tab:checked ~ aside .label_navi,
#broll_tab:checked ~ aside .label_broll {
     border:none;
     cursor:auto;
     color:#222;
     font-style:italic;
}


#carousel {
    overflow: hidden;
    width: calc(100% - 400px);
    height: 100%;
    position:relative;
    left:0;
    top:0;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

#posts_tab:checked ~ #carousel .wrapper {
    -webkit-transform: translateY(0);
    transform: translateY(0); 
}

#fask_tab:checked ~ #carousel .wrapper {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%); 
}

#navi_tab:checked ~ #carousel .wrapper {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%); 
}

#broll_tab:checked ~ #carousel .wrapper {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%); 
}

[class^="panel_"] {
    overflow: auto;
    position: relative;
    width: inherit;
    height: inherit;
}

/*pagination*/

div.pg {
    margin:1rem auto; 
    margin-bottom:0;
}
div.pg * + * {margin:4px;}

span.currentpg {font-style:italic;}

/*posts*/

#entries {
    position:relative;
}


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


article.posts:first-of-type, .panel_posts article.posts:nth-of-type(2){margin-top:60px;}

.panel_posts article.posts:first-of-type {margin-top:{select:post spacing};}

.post700 article.posts {width:700px;}
.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;}

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

.white_bg .captions, .white_bg .pads {
    border:1px solid #f5f5f5;
}

.white_bg .captions {border-top:none;}

.white_bg .post_footer {
    border-top:none;
    border-left:1px solid #f5f5f5;
    border-right:1px solid #f5f5f5;
    border-bottom:1px solid #f5f5f5;
}

.captions a, .ask_cont > span a, .tab_iu a, span.qsource a, .sb_desc a, .pg a, .navi-items > ul > li > a, .mobd_txt a  {
    border-bottom:1px solid #eaeaea;
-webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

.captions a:hover, .tab_iu a:hover, span.qsource a:hover, .sb_desc a:hover, .pg a:hover, .navi-items > ul > li > a:hover, .mobd_txt 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;      
}


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

.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: {select:font size};
}

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


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

.posts blockquote blockquote {
 padding: 0 0 0 {select:font size};
 margin: calc({select:font size} * 0.5);
    
}

img.photop {display:block;}

.panel_posts .posts h2 {line-height:1.6;}

/*photoset posts*/

div.photoset-grid {background:#fff;}

/***** the entire photoset/photoset container *****/
[photoset-layout] {
  grid-column-gap: {select:photoset gutter}; /* this is the gap between the columns */
  grid-row-gap: {select:photoset gutter}; /* this is the gap between the rows */
  grid-gap: {select:photoset gutter}; /* this is the gap between both the rows and the columns; you should probably use this if they are the same value */
}

/*lightbox*/
input[type="checkbox"] { display: none; }

label.lightbox {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  z-index: 101;
  overflow: auto;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-transition: -webkit-transform .75s ease-out;
  transition: transform .75s ease-out;
}

label.lightbox img {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 3px 8px rgba(150, 150, 150, 0.25);
  opacity:100%;
}


input[type="checkbox"]:checked + .lightbox {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

input[type="checkbox"]:checked ~ #everything, input[type="checkbox"]:checked ~ #leo, input[type="checkbox"]:checked ~ header.mobtb { opacity: .1; }


/*video*/

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

/*quotes*/
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} * 1.8);}
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.5);}
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;}


/*audio*/

.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:30px;
    margin-left:30px;    
}


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

div.datesourcetag a {color:inherit;}
div.datesourcetag a:hover {color:{color:highlight};}

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

/*FAQ*/
.post400 iframe#askbox, .post350 iframe#askbox, .post 400 iframe#ask_form, .post 350 iframe#ask_form {height:250px;}    

.panel_fask .pads h2 {margin-top:1em;font-style:italic;}

p.tabq {margin-top:1.5em!important;font-weight:bold;}
p.taba {padding-left:1em;border-left:1px solid #222;}


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

.navi-items h6 {
    font-style:italic;
    margin-bottom:1rem;
    font-size:inherit;
    margin-top:0;
}

.navi-items:first-of-type {padding-left:0;}
.navi-items:last-of-type {padding-right:0;}

.post350 .navi-items {padding-left:0;margin-top:16px;}

.navi-items ul {list-style:none;}

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

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

.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:20px;
    -ms-flex-preferred-size:calc(20% - 40px);
    -webkit-flex-basis:calc(20% - 40px);
    flex-basis:calc(20% - 40px);
}


img.followed {
    display:block;width:100%;
    border-radius:2%;
    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;      
}


/*responsive*/

header.mobtb {
    height:60px;
    background:#fff;
    text-align:center;
    line-height:60px;
    display:none;
    position:fixed;
    top:0;
    left:0;
    z-index:90;
    width:100%;
    opacity:1;
    box-shadow: 0 2px 4px rgba(200, 200, 200, 0.25);
  -webkit-transition: opacity .75s ease-out;
  transition: opacity .75s ease-out;        
}

header.mobtb label {display:inline-block;margin-left:8px;margin-right:8px;font-family:'raleway';text-transform:uppercase;letter-spacing:1.2px;}

header.mobtb label:first-of-type {margin-left:0;}
header.mobtb label:last-of-type {margin-right:0;}

/* Effect 1: Brackets */
.mobtb label::before,
.mobtb label::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;
}

.mobtb label::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.mobtb label::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.mobtb label:hover::before,
.mobtb label:hover::after,
.mobtb label:focus::before,
.mobtb label:focus::after,
#posts_tab:checked ~ .mobtb .label_posts::before,
#posts_tab:checked ~ .mobtb .label_posts::after,
#fask_tab:checked ~ .mobtb .label_fask::before,
#fask_tab:checked ~ .mobtb .label_fask::after,
#navi_tab:checked ~ .mobtb .label_navi::before,
#navi_tab:checked ~ .mobtb .label_navi::after,
#broll_tab:checked ~ .mobtb .label_broll::before,
#broll_tab:checked ~ .mobtb .label_broll::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}


article.mobpg {
    text-align:center;
    display:none;
    margin-top:{select:post spacing};
}

article.mobpg a {
    color:#222;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

article.mobpg a:hover {
    color:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;  
}

article.mobdesc {
    background:#fff;
    padding:calc({select:font size} * 1.5);
    display:none;
    box-shadow: 0 2px 4px rgba(200, 200, 200, 0.25);
}

.white_bg article.mobdesc {
    box-shadow: 0 2px 6px rgba(180, 180, 180, 0.25);
}

.mobd_img {
    width:128px;
    margin-right:24px;
}

.mobd_img img {
    border-radius:2%;
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.mobd_img a:hover img {
    opacity:0.7;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.post350 .mobd_img {width:96px;}

.mobd_txt {width:calc(100% - 128px - 24px);}

.post350 .mobd_txt {width:calc(100% - 96px - 24px);}


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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post700 aside {width:300px;}
.post700 div#sidewrap {width:240px;}
.post700 #carousel {width:calc(100% - 300px);}
}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post700 aside {display:none;}
.post700 #carousel {width:100%;}

.post700 article.mobdesc {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;    
}

.post700 article.mobpg, .post700 header.mobtb {display:block;}

}


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

.post700 article {
    width:96%!important;
}

}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post540 aside {width:300px;}
.post540 div#sidewrap {width:240px;}
.post540 #carousel {width:calc(100% - 300px);}
}


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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post500 aside {width:300px;}
.post500 div#sidewrap {width:240px;}
.post500 #carousel {width:calc(100% - 300px);}
}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post540 aside, .post500 aside {display:none;}
.post540 #carousel, .post500 #carousel {width:100%;}
.post540 article.mobdesc, .post500 article.mobdesc {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;     
}

.post540 article.mobpg, .post540 header.mobtb,.post500 article.mobpg, .post500 header.mobtb {display:block;}


}

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

.post500 article, .post540 article {
    width:96%!important;
}

}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post450 aside {width:240px;}
.post450 div#sidewrap {width:200px;}
.post450 #carousel {width:calc(100% - 240px);}
}


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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post400 aside {width:240px;}
.post400 div#sidewrap {width:200px;}
.post400 #carousel {width:calc(100% - 240px);}
}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post350 aside {width:240px;}
.post350 div#sidewrap {width:200px;}
.post350 #carousel {width:calc(100% - 240px);}
}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post450 aside, .post400 aside {display:none;}
.post450 #carousel, .post400 #carousel {width:100%;}

.post450 article.mobdesc, .post400 article.mobdesc {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;     
}

.post450 article.mobpg, .post450 header.mobtb,.post400 article.mobpg, .post400 header.mobtb {display:block;}

}

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

aside, #carousel, #sidewrap {
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;   
}

.post350 aside {display:none;}
.post350 #carousel {width:100%;}

.post350 article.mobdesc {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;      
}

.post350 article.mobpg, .post350 header.mobtb {display:block;}

.mobd_txt > h2 {margin-top:0;}
.mobd_img {width:96px;}
.mobd_txt {width:calc(100% - 96px - 24px);}

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

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

}

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

.post450 article, .post400 article, .post350 article {
    width:96%!important;
}

}

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

/*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
#leo {
    opacity:1.0;
    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;
  -webkit-transition: opacity .75s ease-out;
  transition: opacity .75s ease-out;      
   
}
 
#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>        
    </head>
<body class="{select:background} {select:post width} {select:notes display}">


<div id="loading_overlay">
    <div class="lds-dual-ring"></div>
</div>


{block:posts}
{block:photoset}
{block:photos}

<input type="checkbox" id="{PhotoURL-HighRes}">
<label for="{PhotoURL-HighRes}" class="lightbox"><img src="{PhotoURL-HighRes}"></label>


{/block:photos}
{/block:photoset}

{block:photo}
<input type="checkbox" id="{PhotoURL-HighRes}">
<label for="{PhotoURL-HighRes}" class="lightbox"><img src="{PhotoURL-HighRes}"></label>
{/block:photo}

{/block:posts}


<main id="everything">
    <input hidden type="radio" name="rad-set" id="posts_tab" checked/>
    
    {block:AskEnabled}
    <input hidden type="radio" name="rad-set" id="fask_tab"/>
    {/block:AskEnabled}
    
    <input hidden type="radio" name="rad-set" id="navi_tab"/>
    
    {block:Following}
    <input hidden type="radio" name="rad-set" id="broll_tab"/>
    {/block:Following}
    
     
<!--mob topbar-->

<header class="mobtb">

 <label for="posts_tab" class="label_posts"><span>Posts</span></label> 
    
{block:AskEnabled}
<label for="fask_tab" class="label_fask"><span>FAQ</span></label>    
{/block:AskEnabled}
<label for="navi_tab" class="label_navi"><span>Navigation</span></label>

{block:ifshowblogroll}
{block:Following}

<label for="broll_tab" class="label_broll"><span>Blogroll</span></label>

{/block:Following}
{/block:ifshowblogroll}


</header>

<!--/mob topbar-->    

<div id="carousel">
    <div class="wrapper">
<section class="panel_posts">
    <div id="entries">

<!--mob desc-->

<article class="posts mobdesc">
    <div class="mobd_img">
        <a tooltip="refresh"tooltip-position="top" href="/"><img src="{image:sidebar}"></a>
    </div>
    <div class="mobd_txt">
        <h2>{text:basic info}</h2>
        {block:description}
        {Description}
        {/block:description}
    </div>
</article>
<!--/mob desc-->
    
{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}
 
<label for="{PhotoURL-HighRes}">
<img class="photop pffft" src="{PhotoURL-500}" width="100%" height="auto"> </label>   


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

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

<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div>
    <label for="{PhotoURL-HighRes}" class="grid-item"><img src="{PhotoURL-HighRes}" /></label>
</div>{/block:Photos}</div>

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

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

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

<!--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: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: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:posts}

<!--mob pg-->

<article class="posts mobpg">
{block:indexpage}
{block:Pagination}  
{block:IndexPage}
  <!--PAGINATION-->
 
<div class="pg">
{block:PreviousPage}
<a href="{PreviousPage}">&laquo;</a>
{/block:PreviousPage}
 
{block:JumpPagination length="5"}
 
{block:CurrentPage}
<span class="currentpg">{PageNumber}</span>
{/block:CurrentPage}
 
{block:JumpPage}
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}
 
{/block:JumpPagination}    
   
 
{block:NextPage}
<a href="{NextPage}">&raquo;</a>
{/block:NextPage}    
   
</div>
 
{/block:IndexPage}
{/block:Pagination}  
{/block:indexpage}    
</article>

<!--/mob pg-->
    </div>
</section>
<section class="panel_fask">

{block:AskEnabled}

<article class="posts">

<h1>Info + FAQ</h1>

    <div class="pads">
    
<p>{text:info text}</p>    

<p class="tabq">{text:question 1}</p>

<p class="taba">{text:answer 1}</p>

<p class="tabq">{text:question 2}</p>

<p class="taba">{text:answer 2}</p>

<p class="tabq">{text:question 3}</p>

<p class="taba">{text:answer 3}</p>    
    
<h2>{AskLabel}</h2>    
    <p>

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

{/block:AskEnabled}
    
</section>
<section class="panel_navi">

<article class="posts">
    <h1>Navigation</h1>
<div class="navigrid pads">
<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>    
</article>
    
</section>    
<section class="panel_broll">
{block:ifshowblogroll}
{block:Following}

<article class="posts">
<h1>Blogroll</h1>
    <div class="pads broll">

{block:Followed} 

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

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

{/block:Following}
{/block:ifshowblogroll}

    
</section>        
    </div>
</div>    
    
<aside id="navside">

<div id="sidewrap">

<h2>{text:basic info}</h2>

<div class="sb_img">
    <a tooltip="refresh"tooltip-position="top" href="/"><img src="{image:sidebar}"></a>
</div>

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

<nav class="navtabs">
<!--change to ul li-->

<ul>
    <li><label for="posts_tab" class="label_posts"><span>Posts</span></label> </li>
    
{block:AskEnabled}
<li><label for="fask_tab" class="label_fask"><span>FAQ</span></label> </li>    
{/block:AskEnabled}
    
    
    <li><label for="navi_tab" class="label_navi"><span>Navigation</span></label></li>
    
{block:ifshowblogroll}
{block:Following}

<li><label for="broll_tab" class="label_broll"><span>Blogroll</span></label></li>

{/block:Following}    
{/block:ifshowblogroll}
    
    
</ul>
</nav>   

{block:indexpage}
{block:Pagination}  
{block:IndexPage}
  <!--PAGINATION-->
 
<div class="pg">
{block:PreviousPage}
<a href="{PreviousPage}">&laquo;</a>
{/block:PreviousPage}
 
{block:JumpPagination length="5"}
 
{block:CurrentPage}
<span class="currentpg">{PageNumber}</span>
{/block:CurrentPage}
 
{block:JumpPage}
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}
 
{/block:JumpPagination}    
   
 
{block:NextPage}
<a href="{NextPage}">&raquo;</a>
{/block:NextPage}    
   
</div>
 
{/block:IndexPage}
{/block:Pagination}  
{/block:indexpage}

</div>

</aside>  

</main>

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