html::-webkit-scrollbar { width: 0 !important; display: none; }
body::-webkit-scrollbar { width: 0 !important; display: none; }

html, body {
    overflow-x: hidden !important;
}

body {
    background: white;
    font-size: 1.8vw;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased;
    padding: .5em;
    margin: 0;
    line-height: 1em !important;
    font-weight: 300;
    background-size: 80%;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: blue;
    overflow-x: hidden !important;
    -webkit-touch-callout: none !important; /* iOS Safari */
    -webkit-user-select: none !important; /* Chrome/Safari/Opera */
     -khtml-user-select: none !important; /* Konqueror */
       -moz-user-select: none !important; /* Firefox */
        -ms-user-select: none !important; /* Internet Explorer/Edge */
            user-select: none !important; /* Non-prefixed version, currently
                                not supported by any browser */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.permafix {
    padding: 5vw !important;
    background: black;
    min-height: 100vh;
}

body.permafix #posts {
    margin: 0;
}

body.permafix .post {
    width: 100%;
    top: 0px;
    max-width: 900px;
    position: relative;
    margin: 0 auto;
    float: none;
}

body.permafix .bg {
    opacity: 1 !important;
    margin: -100%;
    padding: 100%;
}

body.permafix .gradientoverlay {
    display: none;
}

body.permafix #title.stuck .xcx {
    fill: blue;
}


p {
margin: 0;
font-size: .5em;
}

a { 
color:blue;
text-decoration:none;
cursor: pointer !important;
}

img {
border: none;
border : 0;
outline:none;
}

a img {
outline: none;
}

ul {
/*    display: block !important;*/
}

li {
    display: block !important;
}

iframe#tumblr_controls {  
}
.defs-only {
    display: none;
}

.container {
/*    max-width:900px;
    margin:0 auto;*/
}

#catalogue {
width:100%;
position:relative;
margin-top: 100%;
/*overflow: hidden;*/
border-top: 1px solid blue;
padding-top: 1em;
}

h1 {
    margin-top: -1em;
    font-family: TimesEighteenLT-Roman, "Times Eighteen", "Times New Roman", Times, serif;
    font-weight: 100;
    font-size: 3em;
    letter-spacing: -.035em;
}

#posts {
    /* display: flex !important; */
    /* flex-wrap: wrap; */
    margin: 0 -1em 0 0;
    padding: 0;
    align-items: center;
}

.shine {
    background-image: url(http://aws-website-timothyluke-12vvf.s3.amazonaws.com/burst.svg);
}

.glow {
    text-shadow: 0px 0px 3px #fff, 0px 0px 10px #fff, 0px 0px 30px #fff ;
    filter: drop-shadow( 0px 0px 2px rgba(255, 255, 255, .6)) drop-shadow( 0px 0px 8px rgba(255, 255, 255, .8) );
}

#contact {
    width: 100%;
    opacity: 0;
    display: block;
    clear: both;
    /* padding: 25% 0 0 0; */
    /* margin: 25% 0 0 0; */
    position: fixed;
    /* left: 0%; */
    color: white !important;
    z-index: 99999;
    text-align: center;
    left: 50%;
    bottom: 50%;
    transition: opacity .5s;
    transform: translate(-50%,50%);
    /* background: black; */
    /* height: 100%; */
    /* vertical-align: -webkit-baseline-middle; */
    /* text-shadow: 1px 1px blue, -1px -1px blue, -1px 1px blue, 1px -1px blue; */
}

.general {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: .75em;
}

#contact a {
    color: white;
}

#contact a:hover {
    text-shadow: 0px 0px 10px white;
}

#disqus {
    display: none;
}

#pagers {
    display: none;
}

.post {
    width: calc( 33.333% - 3em );
    margin: .5em;
    float: left;
}

.post:hover, .post:hover a {
/*    background: blue;
    margin: -.5em !important;
    padding: 1em;
    border-radius: .5em;*/
    color: white;
    z-index: 9999 !important;
}

.post:hover .spotify, .post:hover .applemusic {
    background-color: white;
}

.post:hover .caption {
    border-color: white !important;
}

.post:hover .bg {
    opacity: 1 !important;
}

.post:hover .credit a {
    background: rgba(255, 255, 255, 0.1);
}

.bg {
    opacity: 0;
    height: 312.5%;
    width: calc( 100% + 1em );
    position: absolute;
    bottom: 0;
    margin: -.5em;
    z-index: -9999 !important;
    border-radius: .75em;
    transition: opacity .25s ease-in-out;
}

.album .bg {
    height: 312.5%;
}

.caption {
    height: 0;
    border-bottom: .5px solid blue;
    border-right: .5px solid blue;
    border-radius: 0 0 .5em 0;
    padding: 0 .5em 50% 0;
    position: relative;
}

.album .photo .caption {
     padding: 0 .5em 48.4% 0 !important;
}

a.spotify {
    -webkit-mask: url(https://aws-website-timothyluke-12vvf.s3.amazonaws.com/PC/spotify.svg);
    mask: url(https://aws-website-timothyluke-12vvf.s3.amazonaws.com/PC/spotify.svg);
    right: 0em;
}

a.applemusic {
    -webkit-mask: url(https://aws-website-timothyluke-12vvf.s3.amazonaws.com/PC/apple.svg);
    mask: url(https://aws-website-timothyluke-12vvf.s3.amazonaws.com/PC/apple.svg);
    right: 1.25em;
}

a.spotify, a.applemusic {
    background: blue;
    display: block;
    position: absolute;
    bottom: 0;
    height: 1.5em;
    width: 1.5em;
    color: rgba(0,0,0,0) !important;
    letter-spacing: -300em;
}

a.spotify:hover, a.applemusic:hover {
    background: blue !important;
}

.album {
    width: calc( 100% - 23.5em );
    float: right;
    margin-right: 6.4em;
}

.number {
    display: block;
    width: 30%;
    float: left;
}

.url {
    display: block;
    float: right;
/*    height: 1em;*/
    width: 70%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

.release {
/*    color: black;*/
    font-size: 1.5em;
    line-height: 1em;
}

.album .release {
    font-size: 2.5em;
}

.title, #contact {
    font-family: TimesEighteenLT-Roman, "Times Eighteen", "Times New Roman", Times, serif;
    display: inline-block;
}


.by {
    /* white-space: pre; */
    font-family: cursive;
/*    text-transform: uppercase;*/
    font-size: .5em;
    /* display: inline; */
/*    border-bottom: 1px solid black;*/
    line-height: 0;
    /* height: 1em; */
    /* position: relative; */
}

.by:before {
    content: '\00000A';
    clear: right;
    display: block;
}

.artist {

}

.credit {
    display: block;
    position: absolute;
    line-height: 1.5em;
    bottom: .5em;
    width: 75%;
}

.credit a {
    background: rgba(0, 0, 255, 0.1);
    display: inline-block;
    padding: 0 .5em;
    border-radius: .5em;
}

.credit a:hover {
    background: white !important;
    color: blue !important;
}

.post img {
}

.post:hover .gradientoverlay {
    opacity: 0;
}

.fadeout {
    opacity: 0;
}

.photo_div {
    position: relative;
    height: 0;
    padding-bottom: 100%;
}

.post img, iframe {
 border-radius: .25em;*/
}

.post img.gradientoverlay {
    position: absolute;
    top: 0;
    left: 0;
    filter: url(#b) !important;
    transition: opacity .25s ease-in-out;
    pointer-events:none;
}

.artwork {
        overflow: hidden !important;
}

.artwork img {
    width: 100%;
    height: auto;
}

.releasemajor {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.releasemajor {
    width: 100%;
}

.spread {
    margin: 0 auto;
    padding: 2em 0 0 0;
}

.albumtitle {
    width: 100%;
    display: inline-block;
    margin: 1em 0 2em 0;
}

.year {
    float: right;
}

.photoset, .tmblr-iframe {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: none;
}

.post img {
width: 100%;
position: relative;
}

.post embed {
    width: 20vw !important;
}
.post #video iframe {
    width: 20vw !important;
    height: 35.7vw !important;
}

.post #video iframe.spotify_audio_player {
}

.post .photoset a:first-child {
display:block !important;
border:0 !important;
padding:0 !important;
}
.post .photoset a {
display:none;
}
#video {
}

#boysvideo {
    margin: 100vh 6vw 0 0;
    padding-top: 1em;
}

.vidcontain {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    margin: 1em 0 1em 0;
}

.vidcontain iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text, .answer {
    background-color: #fea2ef;
    border-radius: .5em;
    padding: .5em;
    box-sizing: border-box;
    cursor: pointer !important;
}

.text a, .answer a {
    height: auto;
    display: block;
}

.text p, .answer p {
    font-size: 1em;
}

.post.text:hover, .post.answer:hover {
    background: #208efa;
}

.date {
    display: block;
    position: absolute;
    right: 0px;
    bottom: -2em;
    font-size: .5em;
    color: #fff;
    opacity: .3;
}

.notes {
    font-size: .5em;
}

.link {
    color: #fea2ef;
}

.link:hover, .link:hover a.link {
    color: #208efa;
}

.link a.link {
/*    color: #fea2ef;*/
}

#title {
    width: 75%;
    position: fixed;
    z-index: 99999 !important;
    transition: .5s;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 40%);
    -webkit-transform: translate(-50%, 40%);
/*    animation: show 1s forwards 1s;*/
/*    opacity: 0;*/
}
#title.stuck {
    position: fixed;
    opacity: 1 !important;
bottom: 50%;
    cursor: pointer !important;
/*    animation: none;*/
}

.mini {
        transform: translate(9%, 40%) scale(.25) !important;
    -webkit-transform: translate(9%, 40%) scale(.25) !important;
}

#title a {
    display: block;
}

#title .p, #title .c1, #title .m, #title .u, #title .s, #title .i, #title .c2 {
    transition: .5s;
    stroke-width: 2em;
    stroke-opacity: 0;
    stroke: white;
    position: relative;
    transform-box: fill-box;
}

#title .p:hover, #title .c1:hover, #title .m:hover, #title .u:hover, #title .s:hover, #title .i:hover, #title .c2:hover {
/*fill: white;
filter: drop-shadow( 0px 0px 2px rgba(255, 255, 255, .6)) drop-shadow( 0px 0px 8px rgba(255, 255, 255, .8) );
z-index: 9999 !important;*/
}

/*@keyframes sting {
    0% {}
    50% {translate: rotateZ(5deg);}
    100% {}
}*/

#title.stuck:hover svg {filter: drop-shadow( 0px 0px 2px rgba(0, 0, 255, 1)) drop-shadow( 0px 0px 8px rgba(0, 0, 255, 1) );}

svg.logo:hover {
        filter: drop-shadow( 0px 0px 2px rgba(255, 255, 255, .6)) drop-shadow( 0px 0px 8px rgba(255, 255, 255, .8) );
}

#title svg .pcmusiclogo {fill:white;}
#title.stuck svg .pcmusiclogo {fill:blue !important;}

#title.stuck .p{transform: translateX(300%); -webkit-transform: translateX(300%);}
#title.stuck .c1{opacity: 0;}
#title.stuck .m{opacity: 0;}
#title.stuck .u{opacity: 0;}
#title.stuck .s{opacity: 0;}
#title.stuck .i{opacity: 0;}
#title.stuck .c2{transform: translateX(-200%); -webkit-transform: translateX(-200%);}

.follow {
position:fixed;
top:20px;
right:20px;
z-index:5000;
}
.archive {
position:fixed;
top:20px;
left:20px;
z-index:5000;
}
.message {
position:fixed;
bottom:20px;
left:20px;
z-index:5000;
}
.random {
position:fixed;
bottom:20px;
right:20px;
z-index:5000;
}
#toTop {
width:100%;
text-align:center;
margin:auto;
z-index:4000;
position:fixed;
display:none;
bottom:20px;
cursor:pointer;
}
.player {
background:#000;
}
ul.chat {
list-style-type:none;
padding:0;
margin:0;
}
#infscr-loading {
display:none !important;
}

.masonry, .masonry-brick {
/*    -webkit-transition-duration: 0.25s;
    -moz-transition-duration: 0.25s;
    -o-transition-duration: 0.25s;
    transition-duration: 0.25s;*/
}

.masonry-brick {

}

.tumblr_video_container {
height: auto !important;
position: relative !important;
overflow: hidden;
}

.corner {
    top: 0;
    right: -0.75em;
    position: absolute;
    width: .5em;
    height: 0em;
    padding-bottom: .5em;
    color: #fff;
    overflow: visible; 
    z-index: 4000;
    transition: transform .25s;
}

.corner svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.copiright {
    fill: #fea2ef;
    transition: fill .25s;
}

.corner:hover .copiright {
    fill: red;
}

.post:hover a .corner {
    transform: rotate(360deg);
}

.post:hover a .corner .copiright {
    fill:#208efa;
}

#arrow {
    position: fixed;
    bottom: 4em;
    width: 5em;
    height: 2.5em;
    left: calc( 50% - 2.5em );
    animation: hover 2s ease-in-out infinite;
    font-size: .5em;
    cursor: pointer !important;
}

.subhead {
    color: white;
}

#nav {
    width: 100%;
    padding: 0px;
    margin: 0px auto 0px auto;
    position: fixed;
    left: 50%;
    bottom: 4em;
    height: auto;
    transform: translate(-50%);
    text-align: center;
    overflow: visible;
}

#nav a {
    display: block;
    color: white;
}

#nav a:hover {
    text-shadow: 0px 0px 5px #fff;
}

.navitems {
    width: auto;
    overflow: visible;
    position: relative;
    margin: 0 auto;
    display: inline-block;
}

.navitem {
float: left;
    margin: 0 .25em;
}

.socials {
    width: 20em;
    padding: 0px;
    margin: 0px auto 0px auto;
    position: fixed;
    left: 50%;
    bottom: 0em;
    height: auto;
    transform: translate(-50%);
}


.socialcolumn {
  float: left;
    width: 20%;
  height: 2.5em;
}

a svg .st0 {
  fill: white;
}

.socialcolumn a:hover svg, #arrow:hover svg {
  filter: drop-shadow( 0px 0px 2px rgba(255, 255, 255, .6)) drop-shadow( 0px 0px 8px rgba(255, 255, 255, .8) );
}

.socialcolumn a:hover svg .st0 {
    fill: white;
}

.terms {
    color: white;
    font-size: 10px;
    text-align: center;
    padding-bottom: 1em;
    width: 100%;
    float: left;
    position: fixed;
    bottom: 0px;
    -webkit-font-smoothing: antialiased;
    transform: translate3d(0,0,0);
    z-index: 9999;
    margin: 0 -1em 0 -1em;
}

.terms a {
    color: white;
}

.hide {
    opacity: 0 !important;
    pointer-events: none !important;
}

.hidelogo {
    opacity: 0 !important;
    transform: translate(-50%, 40%) rotateX(90deg) !important;
}

.show {
    opacity: 1 !important;
}

#pcmusic {
    transition: opacity .5s, height 10s;
    position: fixed;
    width: 100%;
    height: 110vh;
    bottom: 0px;
    left: 0px;
    z-index: 9999;
    transform: translate3d(0,0,0);
    background-color: blue;
/*     animation: show 1s forwards; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300%;
}

#pcmusic svg {
    width: 100%;
    height: 100%;
}

#pcmusic a.torso {
  display: block;
  width: 100%;
height: 100%;
position: relative;

}

#pcmusic a.torso img {
    clip-path: url(#clipping);
    height: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transition: height 10s;
}

#iMessage {
    width: 24vw;
    height: 16.56vw;
    position: fixed;
    top: 7vw;
    background-size: contain;
    right: 7vw;
    z-index: 9999;
/*    opacity: 0;*/
    animation: hover 10s ease-in-out infinite;
}

@keyframes hover {
    0% {transform:translateY(0)}
    50% {transform:translateY(1em)}
    100% {transform:translateY(0)}
}

@-webkit-keyframes show {
  
0% { opacity: 0; transform: rotateX(90deg) translate(-50%, -50%); }
100% { opacity: 1; transform: rotateX(0deg) translate(-50%, -50%); }
}

@keyframes show {
0% { opacity: 0; transform: rotateX(90deg) translate(-50%, -50%); }
100% { opacity: 1; transform: rotateX(0deg) translate(-50%, -50%); }
}

.bubble {
    fill:#1D8EFA;
}

.charlixcx {
    fill:#fff;
}

.writing {
    width: 87%;
    height: auto;
    position: absolute;
    top: 19%;
    left: -4%;
    transition: .5s;
    image-rendering: pixelated;
}

#iMessage:hover .listen {
    fill: #fff;
}

#iMessage:active .writing {
mix-blend-mode: difference;
}

#iMessage:hover svg {
        -webkit-filter: drop-shadow( 0px 0px 5px #208efa );
    filter: drop-shadow( 0px 0px 5px #208efa );
}

#iMessage:hover .writing {
    transform: rotate(2deg);
}

@media only screen and (max-width: 900px) {
 
body {
    font-size: 4vw;
}

.hidelogo {
        transform: translate(-50%, 40%) !important;
}

.permafix {
/*    padding: 8vw !important;*/
}

.socials {
    width: 80%;
    bottom: 1%;
}

.post {
width: calc( 50% - 2.5em );
/*height: 45.5vw;*/
margin: 0 .5em .5em 0;
}

.post img {
    border-radius: .5em;
}

.caption {
padding: 0 .5em 75% 0;
}

.album {
width: calc( 100% - 4.5em );
/*    height: 94vw;*/
margin:0 0 .5em 0;
float: left;
}

.album .bg {
height: 312%;
}

.bg {
    height: 240%;
    margin: -.25em;
    width: calc( 100% + .5em );
}

.release {
    font-size: 1em;
}

.post embed {
    width: 40vw !important;
}
.post #video iframe {
    width: 40vw !important;
    height: 71.4vw !important;
}

.post #video iframe.spotify_audio_player {
    height: 40vw !important;
}

#boysvideo {
    margin: 100vh 8vw 0 0;
}

#iMessage {
    width: 36vw;
    height: 24.84vw;
    margin: 0 1em 0 0;
    right: 0;
}

#title {
    bottom: 20em;
    transform: translate(-50%, 40%);
    -webkit-transform: translate(-50%, 40%);
}

#title.stuck {
    bottom: 20em;
        transform: translate(-60%, 40%);
    -webkit-transform: translate(-60%, 40%);
}

#title.mini {
transform: translate(5%, 40%) scale(.4) !important;
-webkit-transform: translate(5%, 40%) scale(.4) !important;
}

}

@media screen and (min-width:600px) and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

}


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

.gradientoverlay {
    display: none;
}

}

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

.terms {
    font-size: 8px;
}

}


@media only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio: 2) {

}


@media screen and (min-width:2048px) {


}