article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;clear: both;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea,optgroup,option{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
:root {
/* margin */
--twenty: 20px;
--forty: 40px;
--sixty: 60px;
--eighty: 80px;
--onehundred: 100px;
--onetwenty: 120px;
/* SVG */
--shape_one: polygon(42% 11%, 44% 10%, 46% 10%, 49% 10%, 52% 10%, 54% 12%, 55% 14%, 57% 16%, 57% 20%, 56% 22%, 56% 24%, 56% 23%, 57% 23%, 58% 22%, 60% 22%, 62% 23%, 63% 26%, 62% 30%, 62% 36%, 62% 41%, 64% 48%, 67% 55%, 70% 60%, 73% 64%, 75% 64%, 77% 64%, 79% 63%, 83% 62%, 84% 64%, 83% 65%, 83% 66%, 82% 69%, 82% 71%, 83% 70%, 86% 69%, 88% 69%, 92% 70%, 92% 71%, 92% 73%, 91% 77%, 91% 78%, 93% 78%, 97% 79%, 98% 82%, 98% 83%, 96% 84%, 95% 84%, 93% 85%, 93% 87%, 93% 88%, 93% 89%, 92% 90%, 90% 91%, 87% 91%, 87% 93%, 86% 94%, 85% 94%, 82% 94%, 78% 93%, 78% 94%, 77% 96%, 76% 98%, 75% 98%, 71% 98%, 67% 96%, 66% 96%, 65% 97%, 65% 98%, 63% 99%, 60% 99%, 57% 98%, 56% 98%, 54% 97%, 52% 95%, 50% 93%, 50% 91%, 49% 89%, 49% 88%, 48% 88%, 45% 88%, 40% 87%, 34% 84%, 29% 80%, 24% 76%, 19% 72%, 18% 71%, 17% 70%, 17% 70%, 17% 69%, 18% 69%, 20% 68%, 20% 68%, 21% 67%, 17% 64%, 12% 59%, 6% 51%, 3% 46%, 2% 43%, 2% 41%, 1% 38%, 1% 36%, 1% 35%, 2% 34%, 3% 34%, 6% 34%, 6% 33%, 7% 33%, 8% 32%, 7% 31%, 6% 30%, 6% 29%, 5% 29%, 5% 28%, 4% 27%, 4% 26%, 4% 25%, 5% 24%, 5% 22%, 6% 21%, 6% 20%, 7% 20%, 8% 20%, 8% 20%, 10% 20%, 11% 20%, 12% 20%, 12% 20%, 12% 19%, 12% 18%, 13% 16%, 15% 11%, 15% 8%, 16% 6%, 16% 5%, 16% 5%, 16% 4%, 16% 3%, 17% 2%, 18% 1%, 20% 1%, 21% 1%, 22% 2%, 24% 3%, 25% 2%, 26% 1%, 27% 1%, 30% 2%, 33% 3%, 35% 5%, 37% 7%, 41% 12%);
--shape_two: polygon(57% 16%, 58% 16%, 59% 15%, 60% 15%, 61% 16%, 62% 16%, 62% 17%, 62% 18%, 61% 20%, 60% 25%, 59% 27%, 60% 27%, 62% 27%, 63% 27%, 65% 27%, 66% 27%, 69% 27%, 70% 26%, 72% 25%, 73% 24%, 74% 24%, 74% 24%, 75% 25%, 75% 26%, 75% 27%, 75% 28%, 77% 26%, 80% 21%, 84% 15%, 87% 8%, 89% 4%, 90% 3%, 90% 2%, 91% 2%, 93% 2%, 93% 2%, 94% 2%, 94% 3%, 94% 5%, 93% 12%, 91% 17%, 88% 25%, 85% 31%, 82% 36%, 79% 40%, 75% 44%, 77% 43%, 79% 43%, 81% 43%, 82% 43%, 83% 43%, 82% 45%, 81% 49%, 79% 53%, 78% 56%, 75% 59%, 73% 62%, 70% 64%, 67% 67%, 66% 67%, 65% 68%, 66% 68%, 66% 69%, 67% 69%, 68% 69%, 69% 71%, 70% 72%, 70% 73%, 70% 74%, 70% 76%, 69% 76%, 66% 77%, 63% 79%, 61% 81%, 63% 81%, 64% 82%, 66% 83%, 68% 84%, 69% 86%, 69% 87%, 69% 87%, 69% 89%, 69% 90%, 67% 91%, 65% 92%, 63% 93%, 64% 94%, 65% 95%, 65% 96%, 65% 96%, 64% 97%, 64% 97%, 62% 98%, 59% 98%, 55% 98%, 50% 98%, 46% 99%, 42% 98%, 30% 96%, 23% 94%, 20% 93%, 14% 90%, 10% 86%, 7% 84%, 6% 83%, 6% 83%, 6% 82%, 6% 81%, 6% 80%, 6% 79%, 6% 79%, 7% 78%, 8% 77%, 9% 76%, 9% 76%, 10% 76%, 11% 76%, 13% 76%, 14% 76%, 18% 76%, 16% 74%, 15% 73%, 14% 72%, 14% 71%, 15% 70%, 15% 68%, 17% 65%, 20% 62%, 23% 58%, 26% 58%, 29% 57%, 27% 56%, 27% 55%, 26% 54%, 26% 53%, 26% 52%, 26% 52%, 28% 49%, 29% 48%, 34% 43%, 33% 43%, 33% 42%, 33% 41%, 33% 40%, 34% 35%, 37% 28%, 38% 24%, 39% 21%, 41% 17%, 44% 14%, 46% 11%, 47% 10%, 49% 9%, 51% 9%, 54% 10%, 55% 11%, 56% 12%, 56% 13%, 56% 14%, 56% 17%, 56% 19%);
--shape_three: polygon(21% 20%, 21% 18%, 19% 15%, 19% 12%, 20% 9%, 23% 5%, 27% 3%, 33% 2%, 39% 2%, 46% 3%, 52% 3%, 61% 4%, 67% 6%, 73% 9%, 76% 12%, 81% 16%, 84% 17%, 86% 20%, 87% 24%, 87% 28%, 86% 32%, 85% 34%, 84% 35%, 84% 36%, 84% 38%, 84% 41%, 83% 44%, 83% 45%, 82% 46%, 80% 49%, 79% 50%, 76% 52%, 75% 53%, 75% 54%, 75% 55%, 75% 57%, 76% 62%, 76% 70%, 76% 72%, 76% 77%, 74% 84%, 72% 89%, 68% 93%, 65% 95%, 62% 97%, 57% 98%, 51% 99%, 46% 99%, 40% 99%, 38% 98%, 35% 97%, 31% 95%, 27% 92%, 24% 87%, 21% 82%, 19% 78%, 17% 73%, 16% 70%, 17% 67%, 17% 64%, 18% 63%, 17% 62%, 16% 61%, 15% 60%, 13% 58%, 11% 56%, 11% 55%, 11% 55%, 12% 53%, 13% 50%, 14% 48%, 16% 45%, 18% 43%, 16% 41%, 14% 40%, 13% 38%, 13% 37%, 13% 36%, 13% 35%, 13% 34%, 14% 34%, 14% 31%, 17% 27%, 19% 24%);
--shape_four: polygon(1% 13%, 3% 12%, 5% 12%, 10% 12%, 19% 12%, 25% 12%, 33% 13%, 41% 15%, 49% 16%, 57% 18%, 61% 20%, 64% 21%, 66% 21%, 67% 21%, 69% 20%, 70% 19%, 72% 18%, 73% 18%, 74% 18%, 78% 18%, 81% 18%, 84% 19%, 87% 20%, 90% 22%, 91% 23%, 91% 25%, 91% 27%, 91% 29%, 90% 31%, 89% 32%, 88% 34%, 88% 34%, 89% 37%, 90% 39%, 92% 41%, 94% 43%, 96% 45%, 96% 48%, 96% 50%, 96% 51%, 96% 52%, 95% 53%, 95% 54%, 94% 55%, 95% 57%, 97% 58%, 98% 60%, 98% 62%, 99% 64%, 99% 65%, 98% 68%, 98% 70%, 97% 71%, 95% 72%, 94% 73%, 92% 73%, 89% 74%, 90% 76%, 91% 78%, 93% 80%, 94% 82%, 94% 84%, 93% 85%, 92% 86%, 91% 86%, 89% 87%, 88% 87%, 87% 88%, 85% 89%, 85% 90%, 82% 90%, 75% 90%, 69% 90%, 63% 90%, 56% 89%, 52% 88%, 48% 87%, 43% 84%, 38% 81%, 34% 78%, 29% 73%, 25% 67%, 19% 55%, 13% 45%, 9% 37%, 5% 30%, 3% 25%, 2% 20%);
--shape_five: polygon(47% 23%, 49% 22%, 50% 20%, 53% 17%, 56% 14%, 61% 12%, 65% 11%, 71% 10%, 75% 10%, 80% 10%, 80% 10%, 80% 13%, 78% 16%, 75% 19%, 74% 22%, 74% 23%, 74% 23%, 76% 24%, 81% 24%, 83% 24%, 82% 27%, 80% 29%, 76% 32%, 71% 36%, 68% 40%, 64% 46%, 61% 50%, 60% 53%, 60% 55%, 59% 58%, 59% 62%, 60% 71%, 60% 75%, 61% 79%, 63% 84%, 65% 87%, 66% 90%, 66% 92%, 68% 92%, 69% 94%, 70% 94%, 70% 95%, 70% 97%, 68% 97%, 65% 97%, 62% 96%, 60% 95%, 58% 94%, 57% 94%, 56% 95%, 55% 95%, 55% 96%, 54% 97%, 53% 97%, 52% 97%, 51% 97%, 50% 97%, 49% 97%, 48% 97%, 46% 97%, 44% 98%, 43% 98%, 42% 99%, 41% 99%, 39% 99%, 36% 98%, 34% 97%, 30% 96%, 27% 94%, 25% 92%, 25% 90%, 25% 89%, 24% 88%, 25% 87%, 25% 87%, 25% 86%, 25% 86%, 25% 85%, 26% 84%, 28% 83%, 29% 81%, 31% 79%, 32% 77%, 31% 74%, 27% 68%, 23% 62%, 19% 55%, 17% 49%, 16% 44%, 16% 39%, 16% 33%, 17% 27%, 18% 22%, 19% 18%, 21% 14%, 21% 11%, 23% 9%, 25% 7%, 28% 5%, 32% 3%, 36% 2%, 38% 1%, 40% 1%, 44% 2%, 48% 3%, 50% 4%, 51% 5%, 52% 6%, 52% 7%, 53% 8%, 53% 10%, 52% 12%, 50% 15%);
--shape_six: polygon(16% 6%, 19% 5%, 26% 3%, 31% 2%, 35% 1%, 38% 1%, 39% 1%, 39% 1%, 40% 2%, 40% 5%, 41% 19%, 41% 33%, 42% 40%, 42% 44%, 44% 43%, 46% 42%, 47% 41%, 48% 40%, 49% 38%, 49% 37%, 50% 37%, 50% 37%, 53% 38%, 56% 39%, 57% 40%, 58% 40%, 59% 41%, 59% 43%, 59% 59%, 59% 65%, 59% 68%, 59% 70%, 59% 72%, 60% 73%, 64% 73%, 72% 73%, 78% 73%, 81% 74%, 83% 74%, 83% 74%, 83% 75%, 84% 76%, 84% 83%, 84% 88%, 84% 92%, 85% 94%, 84% 95%, 83% 96%, 82% 97%, 81% 97%, 74% 98%, 61% 99%, 53% 99%, 43% 99%, 38% 98%, 35% 98%, 33% 98%, 31% 97%, 31% 97%, 30% 95%, 26% 75%, 23% 57%, 20% 41%, 19% 37%, 18% 29%, 16% 23%, 16% 20%, 16% 12%);
--shape_seven: polygon(28% 1%, 48% 6%, 46% 8%, 45% 10%, 43% 12%, 40% 13%, 39% 14%, 37% 15%, 36% 16%, 36% 17%, 34% 27%, 32% 37%, 31% 45%, 30% 54%, 29% 61%, 29% 67%, 29% 67%, 33% 68%, 36% 69%, 38% 69%, 40% 67%, 43% 60%, 45% 52%, 47% 47%, 48% 46%, 49% 44%, 50% 44%, 51% 43%, 53% 43%, 54% 44%, 57% 46%, 59% 47%, 59% 47%, 60% 48%, 60% 50%, 60% 54%, 60% 63%, 60% 69%, 60% 74%, 61% 76%, 61% 77%, 63% 77%, 69% 78%, 71% 78%, 73% 78%, 73% 78%, 74% 76%, 75% 72%, 76% 69%, 77% 68%, 78% 67%, 80% 68%, 94% 71%, 92% 74%, 86% 85%, 83% 90%, 80% 94%, 76% 97%, 75% 99%, 74% 99%, 71% 99%, 63% 98%, 56% 96%, 47% 94%, 40% 92%, 30% 90%, 19% 87%, 11% 83%, 6% 81%, 6% 79%, 6% 78%, 6% 76%, 8% 66%, 10% 55%, 14% 44%, 20% 24%, 23% 15%);
--shape_eight: polygon(3% 18%, 9% 18%, 27% 18%, 28% 18%, 29% 18%, 31% 15%, 32% 15%, 33% 14%, 34% 14%, 50% 15%, 61% 16%, 74% 18%, 84% 19%, 90% 20%, 92% 21%, 93% 21%, 94% 24%, 96% 29%, 98% 37%, 99% 41%, 99% 45%, 98% 50%, 96% 53%, 95% 55%, 94% 56%, 90% 60%, 89% 61%, 88% 63%, 88% 65%, 87% 70%, 86% 75%, 85% 78%, 85% 79%, 83% 79%, 79% 78%, 75% 78%, 70% 78%, 65% 78%, 63% 78%, 61% 78%, 59% 79%, 56% 80%, 55% 81%, 54% 82%, 54% 83%, 53% 84%, 53% 85%, 52% 86%, 52% 87%, 50% 87%, 46% 86%, 43% 86%, 43% 83%, 43% 81%, 43% 79%, 43% 78%, 43% 76%, 43% 76%, 43% 75%, 43% 75%, 42% 74%, 42% 74%, 41% 73%, 40% 72%, 39% 72%, 37% 71%, 35% 71%, 35% 71%, 34% 71%, 34% 73%, 33% 74%, 32% 75%, 31% 77%, 30% 78%, 28% 78%, 23% 76%, 20% 76%, 18% 75%, 17% 75%, 16% 74%, 16% 69%, 16% 64%, 16% 59%, 17% 51%, 17% 45%, 18% 40%, 18% 36%, 18% 34%, 18% 34%, 17% 33%, 17% 32%, 16% 31%, 15% 30%, 15% 30%, 14% 30%, 14% 30%, 13% 31%, 10% 32%, 9% 33%, 7% 33%, 5% 33%, 4% 33%, 3% 33%, 1% 33%, 1% 32%, 1% 31%, 1% 29%, 1% 25%);
--shape_nine: polygon(59% 19%, 59% 19%, 60% 18%, 65% 16%, 69% 14%, 71% 13%, 74% 13%, 76% 13%, 79% 13%, 82% 13%, 85% 14%, 85% 14%, 86% 14%, 87% 16%, 88% 17%, 89% 19%, 89% 19%, 90% 20%, 89% 21%, 89% 23%, 88% 25%, 87% 27%, 86% 28%, 86% 28%, 85% 29%, 86% 29%, 89% 30%, 91% 30%, 92% 30%, 94% 31%, 95% 32%, 95% 33%, 95% 34%, 95% 35%, 95% 36%, 95% 38%, 94% 40%, 92% 42%, 91% 44%, 89% 45%, 91% 45%, 94% 47%, 96% 49%, 98% 50%, 99% 51%, 98% 54%, 95% 59%, 94% 62%, 93% 65%, 91% 68%, 90% 70%, 86% 73%, 84% 75%, 80% 78%, 77% 79%, 74% 81%, 69% 83%, 64% 84%, 59% 85%, 54% 85%, 46% 86%, 37% 86%, 28% 86%, 21% 86%, 12% 86%, 7% 85%, 1% 85%, 1% 84%, 6% 80%, 13% 73%, 20% 68%, 25% 61%, 30% 55%, 33% 50%, 35% 46%, 36% 44%, 36% 43%, 35% 42%, 34% 41%, 33% 40%, 33% 38%, 33% 35%, 33% 34%, 34% 32%, 38% 28%, 42% 25%, 48% 24%, 54% 22%);
--shape_ten: polygon(86% 10%, 86% 12%, 84% 16%, 81% 20%, 79% 25%, 76% 30%, 75% 34%, 80% 32%, 85% 30%, 91% 28%, 94% 28%, 94% 28%, 96% 31%, 98% 37%, 99% 40%, 99% 42%, 99% 44%, 98% 46%, 97% 49%, 95% 51%, 93% 53%, 90% 55%, 88% 55%, 85% 55%, 81% 55%, 78% 55%, 79% 57%, 81% 58%, 84% 59%, 85% 60%, 87% 62%, 88% 64%, 88% 65%, 89% 67%, 89% 68%, 89% 69%, 89% 70%, 88% 71%, 88% 71%, 87% 72%, 86% 72%, 85% 72%, 83% 72%, 81% 71%, 77% 71%, 76% 72%, 76% 73%, 76% 74%, 76% 74%, 75% 74%, 73% 74%, 73% 74%, 73% 81%, 73% 86%, 72% 87%, 72% 88%, 68% 86%, 64% 84%, 58% 79%, 54% 76%, 49% 74%, 42% 71%, 42% 72%, 42% 73%, 43% 74%, 42% 75%, 42% 76%, 42% 76%, 41% 77%, 40% 79%, 36% 82%, 32% 83%, 30% 84%, 29% 83%, 28% 83%, 28% 82%, 27% 81%, 27% 80%, 26% 79%, 25% 79%, 22% 79%, 21% 80%, 20% 79%, 20% 77%, 20% 76%, 20% 75%, 19% 76%, 17% 78%, 16% 78%, 13% 79%, 10% 79%, 7% 80%, 5% 80%, 3% 80%, 2% 80%, 2% 79%, 2% 75%, 3% 72%, 5% 68%, 9% 61%, 12% 55%, 15% 49%, 18% 46%, 12% 45%, 9% 44%, 10% 43%, 11% 43%, 13% 42%, 16% 40%, 18% 39%, 15% 38%, 13% 37%, 11% 36%, 14% 36%, 17% 36%, 22% 36%, 29% 38%, 22% 33%, 18% 29%, 16% 28%, 15% 25%, 18% 25%, 21% 26%, 24% 26%, 21% 23%, 20% 21%, 20% 20%, 20% 19%, 20% 18%, 20% 16%, 20% 15%, 21% 14%, 22% 13%, 24% 13%, 26% 13%, 29% 13%, 31% 14%, 33% 14%, 34% 12%, 34% 11%, 35% 11%, 37% 10%, 38% 10%, 40% 10%, 41% 11%, 44% 12%, 46% 13%, 49% 15%, 51% 16%, 51% 15%, 51% 14%, 52% 14%, 53% 13%, 54% 13%, 55% 13%, 57% 13%, 58% 14%, 59% 15%, 59% 16%, 60% 18%, 59% 20%, 64% 15%, 69% 13%, 74% 11%, 81% 10%, 87% 9%);
}
*,
*::after,
*::before {
box-sizing: border-box;
}
::selection {
color: #fff;
background: #435cea;
text-shadow: none;
}
html, body {
height: 100%;
}
body {
font-size: 120%;
line-height: 1.5em;
display: flex;
color: #111;
flex-direction: column;
font-family: base-mono-wide, monospace;
font-weight: 300;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#59f2d3+0,ccef58+29,feffff+100&0.41+0,0+63 */
background: -moz-linear-gradient(top, rgba(89,242,211,0.41) 0%, rgba(204,239,88,0.22) 29%, rgba(228,247,168,0) 63%, rgba(254,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(89,242,211,0.41) 0%,rgba(204,239,88,0.22) 29%,rgba(228,247,168,0) 63%,rgba(254,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(89,242,211,0.41) 0%,rgba(204,239,88,0.22) 29%,rgba(228,247,168,0) 63%,rgba(254,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6959f2d3', endColorstr='#00feffff',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
min-height: 100vh;
}
.overflow_fix {
width: 98vw;
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: -100;
}
img, embed, object, video, iframe {
height: auto;
max-width: 100%;
width: 100%;
display: block;
}
.media iframe, .media object, .media embed {
border: 0 none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.media {
position: relative;
padding-bottom: 67.5%;
height: 0;
overflow: hidden;
float: left;
width: 100%;
}
.hidden,
.text_block.hidden {
display: none;
flex: 0;
}
hr {
clear: both;
color: transparent;
margin: 60px 0;
}
mark {
background: transparent;
color: inherit;
}
a {
background: #f0f54f;
color: #111;
line-height: 1px;
padding: 0 2px;
text-decoration: none;
transition: all .2s;
}
a:hover {
background: #f5e209;
transition: all .2s;
}
.main_nav a.active,
.subnav a.active {
border: 1px solid #111;
background: transparent;
color: #111;
}
.main_nav a.active:hover,
.subnav a.active:hover {
border: 1px solid #f5e209;
background: #f5e209;
color: #111;
}
.headerbg a.active,
.footer a.active {
border: 1px solid #f0f54f;
background: transparent;
color: #f0f54f;
}
.headerbg a.active:hover,
.footer a.active:hover {
border: 1px solid #f5e209;
background: transparent;
color: #f5e209;
}
.nowrap {
white-space: nowrap;
}
h2 {
background: #09f5ba;
display: inline;
padding: 0 2px;
margin-top: 0;
line-height: normal;
}
h2 + h3 {
margin: 0;
}
h2 + p {
margin-top: 0;
}
address {
text-decoration: none;
font-style: normal;
}
.text_block h2 {
padding: 0 2px;
margin-top: 0;
margin-bottom: 0;
position: relative;
display: inline;
line-height: 1.05em;
}
.text_block h2 i:before {
content: ' ';
}
h2 * {
display: inline;
font-weight: 400;
}
h3 {
padding: 0 2px;
}
.text_block h3 {
margin: 0 0 20px;
margin: 0 0 var(--twenty);
}
.faq .text_block h3 {
margin: 60px 0;
margin: var(--sixty) 0;
padding: 0;
}
small {
line-height: normal;
font-size: 70%;
}
.news_post .contain .highlight {
background: #f3dbef;
color: #111;
line-height: 1px;
padding: 0 2px;
text-decoration: none;
}
time {
font-size: 70%;
}
ol, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
clear: both;
}
ul li {
list-style-position: inside;
margin-bottom: 0.8em;
}
ul.disc {
font-size: 16px;
line-height: 18px;
}
.listen ul li {
white-space: pre;
}
.contain ul li::before {
content: "• ";
color: #f4504a;
}
ol {
counter-reset: num 0;
}
ol li {
font-weight: 300;
color: #111;
list-style: none;
list-style-position: inside;
margin-bottom: 0.8em;
}
ol li::before {
font-weight: bold;
color: #f4504a;
counter-increment: num;
content: counter(num)'. ';
}
.contain ul li.box::before,
.contain ul li.carousel-cell::before {
list-style: none;
content: none;
}
ol li span {
font-weight: 300;
color: #111;
}
.news_post .info li > img {
margin: 20px 0;
float: none;
}
.contain {
flex: 1 0 auto;
overflow: hidden;
}
.tour .contain,
.product .contain,
.catalog .contain,
.catalog_item .contain,
.roster_item .contain,
.home .contain {
overflow: visible;
}
.home .contain > section {
overflow: hidden;
}
.news.text_layout .contain > section,
.news.text_layout .contain > .full.module {
margin-bottom: 60px;
margin-bottom: var(--sixty);
}
.news.text_layout .contain > .text_block {
margin-bottom: 60px;
margin-bottom: var(--sixty);
margin-top: 60px;
margin-top: var(--sixty);
}
.news.text_layout .contain > .text_block:last-child {
margin-bottom: 20px;
margin-bottom: var(--twenty);
}
.news .filter {
grid-column: span 2;
}
img {
border-radius: 4px;
max-width: 100%;
}
img:not(.carousel-cell-image) {
width: 100%;
}
.news_post .info img {
width: auto;
min-width: auto;
max-width: auto;
margin-bottom: 20px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.grid {
display: grid;
grid-gap: 20px;
grid-gap: var(--twenty);
height: auto;
margin: 20px;
margin: var(--twenty);
padding: 0;
clear: both;
overflow: hidden;
flex: 1 0 auto;
}
.text_layout .full.module {
margin: 0;
}
.text_layout .grid {
grid-gap: 20px;
grid-gap: var(--twenty);
}
.text_layout .module {
margin: 20px;
margin: var(--twenty);
}
.text_layout .grid.full {
padding: 10px 20px 20px;
padding: 10px var(--twenty) var(--twenty);
}
.text_layout.product .grid.full,
.text_layout.roster_item .grid.full,
.text_layout.tour .grid.full {
padding: 10px 0 20px;
padding: 10px 0 var(--twenty);
}
.text_layout.product .footer .grid.full,
.text_layout.roster_item .footer .grid.full,
.text_layout.tour .footer .grid.full {
padding: 10px 20px 20px;
padding: 10px var(--twenty) var(--twenty);
}
.text_layout .text_block .grid,
.text_layout .text_block .module {
margin: 0;
}
.module {
height: auto;
margin: 20px;
margin: var(--twenty);
padding: 0;
clear: both;
overflow: visible;
}
.grid.full {
margin-right: 0;
margin-left: 0;
overflow: hidden;
padding: 20px;
padding: var(--twenty);
}
.text_layout .grid.full.padded {
padding: 20px;
padding: var(--twenty);
position: relative;
margin: 0;
}
.text_layout .grid.full.padded .bg::before {
opacity: 0.9;
background: #80341c;
}
.headroom {
margin: 0 0 15px;
padding: 20px 20px 0;
padding: var(--twenty) var(--twenty) 0;
overflow: hidden;
flex: 1 0 auto;
}
.news_post .headroom {
margin: 0 0 20px;
}
.news_post .contain {
overflow: visible;
}
header.grid {
width: auto;
margin: 0;
grid-gap: 20px;
grid-gap: var(--twenty);
grid-template-columns: repeat(12, 1fr);
overflow: visible;
}
.headerbg .headroom {
background-repeat: no-repeat;
background-position: center;
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
bottom: 0;
color: #ffffff;
box-sizing: border-box;
z-index: 0;
margin: 0 0 15px;
padding: 20px 20px 60px;
}
.js .category_item.headerbg .headroom.bgloaded {
opacity: 1;
transition: opacity 0.4s;
}
.catalog_item.headerbg .headroom {
padding-bottom: 30px;
margin-bottom: 0;
background-image: none;
background-color: transparent;
background: linear-gradient(180deg, rgb(34, 34, 34) 0%, rgba(49,61,126,0.772128919927346) 46%, rgba(67,92,234,0) 100%);
z-index: 1;
}
h1.logo {
margin: 0;
grid-column: 1/2;
grid-row: 1/1;
align-self: center;
width: 27px;
}
.logo img,
.logo svg {
height: 40px;
width: 27px;
}
.headerbg .logo img {
/* link to a white png file here */
}
.headerbg .logo svg {
fill: #ffffff;
}
.logo a {
margin: 0;
background: transparent;
color: transparent;
display: block;
line-height: normal;
height: auto;
padding: 0;
}
.logo a:hover {
background: transparent;
color: transparent;
}
.logo a:hover img,
.logo a:hover svg {
-webkit-animation-name: wiggle;
-ms-animation-name: wiggle;
-ms-animation-duration: 600ms;
-webkit-animation-duration: 600ms;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
@-webkit-keyframes wiggle {
0% {-webkit-transform: rotate(8deg);}
25% {-webkit-transform: rotate(-7deg);}
50% {-webkit-transform: rotate(7deg);}
75% {-webkit-transform: rotate(-5deg);}
100% {-webkit-transform: rotate(0deg);}
}
@-ms-keyframes wiggle {
0% {-ms-transform: rotate(8deg);}
25% {-ms-transform: rotate(-7deg);}
50% {-ms-transform: rotate(7deg);}
75% {-ms-transform: rotate(-5deg);}
100% {-ms-transform: rotate(0deg);}
}
@keyframes wiggle {
0% {transform: rotate(8deg);}
25% {transform: rotate(-7deg);}
50% {transform: rotate(7deg);}
75% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
.main_nav {
align-self: center;
grid-column: 2/11;
grid-row: 1/1;
height: 40px;
margin-top: 15px;
}
.main_nav ul,
.socials {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
.main_nav li,
.socials li {
display: inline;
font-size: 100%;
line-height: 21px;
margin: auto 1px;
}
.js .main_nav li,
.js .socials li {
display: none;
}
.js .main_nav li.active {
display: inline-block;
margin-bottom: 10px;
}
.main_nav a {
margin: auto 2px;
padding: 5px;
border: 1px solid transparent;
}
/* MOBILE MENU */
/* MOBILE MENU */
/* MOBILE MENU */
/* Color schemes */
.mobile_menu {
--color-text: #222;
--color-bg: #fff;
--color-link: #110046;
--color-link-hover: #e83779;
--path-fill-1: url(#gradient1);
--path-fill-2: url(#gradient2);
--path-fill-3: url(#gradient3);
--color-title: inherit;
--font-size-title: 8vmax;
--font-weight-title: 400;
--color-menu: #ffffff;
--color-menu-hover: #c14343;
--font-size-menu: 3.5vmax;
--font-weight-menu: 400;
--button-bg: #f0f54f;
--button-circle: #222;
--button-line: #222;
}
.mobile_menu {
opacity: 1;
z-index: 200;
position: relative;
}
.global-menu {
width: 100vw;
height: 90vh;
height: calc(var(--vh, 1vh) *90);
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 100;
}
.global-menu__item {
color: var(--color-menu);
font-size: var(--font-size-menu);
font-weight: var(--font-weight-menu);
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
display: block;
margin: 0.75em 0;
transition: transform 0.3s, opacity 0.3s;
transition-timing-function: ease-in;
padding: 20px;
color: #222;
width: min-content;
}
.global-menu__item--mobile_menu {
transform: translateY(100%);
}
.global-menu__item:hover {
color: var(--color-menu-hover);
}
.global-menu__item.is-opened {
opacity: 1;
transform: translateY(0) rotate(0);
pointer-events: auto;
transition-timing-function: ease;
}
.global-menu__item--mobile_menu.is-opened {
transition-duration: .5s;
}
.global-menu__item--mobile_menu:nth-of-type(1) {
transition-delay: 0.25s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(1) {
transition-delay: 0.05s;
}
.global-menu__item--mobile_menu:nth-of-type(2) {
transition-delay: 0.2s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(2) {
transition-delay: 0.1s;
}
.global-menu__item--mobile_menu:nth-of-type(3) {
transition-delay: 0.15s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(3) {
transition-delay: 0.15s;
}
.global-menu__item--mobile_menu:nth-of-type(4) {
transition-delay: 0.1s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(4) {
transition-delay: 0.2s;
}
.global-menu__item--mobile_menu:nth-of-type(5) {
transition-delay: 0.05s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(5) {
transition-delay: 0.25s;
}
.global-menu__item--mobile_menu:nth-of-type(6) {
transition-delay: 0s;
}
.global-menu__item--mobile_menu.is-opened:nth-of-type(6) {
transition-delay: 0.3s;
}
.shape-overlays {
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
pointer-events: none;
position: fixed;
top: 0;
left: 0;
}
.shape-overlays.is-opened {
pointer-events: auto;
}
.shape-overlays__path:nth-of-type(1) {
fill: var(--path-fill-1);
}
.shape-overlays__path:nth-of-type(2) {
fill: var(--path-fill-2);
}
.shape-overlays__path:nth-of-type(3) {
fill: var(--path-fill-3);
}
.party {
opacity: 0;
transition: opacity 0.5s;
transition-timing-function: ease-in-out;
}
.party.is-opened {
position: fixed;
background-size: cover;
background-image: url("https://topshelfrecords.co/redesign/files/1543055710.svg");
background-repeat: repeat;
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
top: 0;
opacity: 0.75;
z-index: 1;
transition: opacity 0.5s;
transition-timing-function: ease-in-out;
}
.hamburger {
width: 64px;
height: 64px;
display: block;
cursor: pointer;
position: fixed;
bottom: 2.25em;
right: 2.25em;
z-index: 110;
border-radius: 50%;
background-color: var(--button-bg);
pointer-events: auto;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.hamburger::after {
width: 64px;
height: 64px;
box-sizing: border-box;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
border: 4px solid var(--button-circle);
border-radius: 50%;
}
.hamburger__line {
width: 28px;
height: 2px;
overflow: hidden;
position: absolute;
z-index: 10;
}
.hamburger__line-in {
width: 84px;
height: 2px;
position: absolute;
top: 0;
left: 0;
}
.hamburger__line-in::before,
.hamburger__line-in::after {
width: 28px;
height: 2px;
content: '';
display: block;
position: absolute;
top: 0;
background-color: var(--button-line);
}
.hamburger__line-in::before {
left: -56px;
}
.hamburger__line-in::after {
left: 0;
}
.hamburger__line--01,
.hamburger__line--02,
.hamburger__line--03,
.hamburger__line--cross01,
.hamburger__line--cross02 {
left: 18px;
}
.hamburger__line--01 {
top: 24.6px;
}
.hamburger__line--02,
.hamburger__line--cross01,
.hamburger__line--cross02 {
top: 31px;
}
.hamburger__line--03 {
top: 37.4px;
}
.hamburger__line--cross01 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger__line--cross02 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.hamburger__line {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
.hamburger__line-in::before,
.hamburger__line-in::after {
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.hamburger__line-in--cross01,
.hamburger__line-in--cross02 {
-webkit-transform: translateX(-33.3%);
transform: translateX(-33.3%);
}
.hamburger__line-in--01 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.hamburger__line-in--02 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger__line-in--02::before,
.hamburger__line-in--02::after {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--03 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger__line-in--03::before,
.hamburger__line-in--03::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger__line-in--cross01 {
-webkit-transition-delay: 0.0s;
transition-delay: 0.0s;
}
.hamburger__line-in--cross02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger__line-in--cross02::before,
.hamburger__line-in--cross02::after {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-opened-navi .hamburger__line-in--01,
.hamburger.is-opened-navi .hamburger__line-in--02,
.hamburger.is-opened-navi .hamburger__line-in--03 {
-webkit-transform: translateX(33.3%);
transform: translateX(33.3%);
}
.hamburger.is-opened-navi .hamburger__line-in--cross01,
.hamburger.is-opened-navi .hamburger__line-in--cross02 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.hamburger.is-opened-navi .hamburger__line-in--01 {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.hamburger.is-opened-navi .hamburger__line-in--02 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.hamburger.is-opened-navi .hamburger__line-in--03 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.hamburger.is-opened-navi .hamburger__line-in--cross01 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.hamburger.is-opened-navi .hamburger__line-in--cross02 {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.hamburger:hover .hamburger__line-in::before,
.hamburger:hover .hamburger__line-in::after {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.hamburger:hover .hamburger__line-in--01::before,
.hamburger:hover .hamburger__line-in--01::after,
.hamburger:hover .hamburger__line-in--02::before,
.hamburger:hover .hamburger__line-in--02::after,
.hamburger:hover .hamburger__line-in--03::before,
.hamburger:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger:hover .hamburger__line-in--cross01::before,
.hamburger:hover .hamburger__line-in--cross01::after,
.hamburger:hover .hamburger__line-in--cross02::before,
.hamburger:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross01::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--cross02::after {
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.hamburger.is-opened-navi:hover .hamburger__line-in--01::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--01::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--02::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--02::after,
.hamburger.is-opened-navi:hover .hamburger__line-in--03::before,
.hamburger.is-opened-navi:hover .hamburger__line-in--03::after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.socials a {
display: inline-block;
line-height: 20px;
background-color: transparent;
}
.socials {
display: none;
margin: 0;
background: transparent;
color: transparent;
line-height: normal;
height: auto;
padding: 0;
align-self: center;
text-align: right;
position: relative;
grid-column: 12/13;
}
.headerbg .socials a {
background-color: transparent;
}
.headerbg .socials a:hover svg {
fill: #f5e209;
transition: all .2s;
}
button.checkout {
margin: 0;
background: transparent;
color: transparent;
line-height: normal;
height: auto;
padding: 0;
align-self: center;
text-align: right;
display: block;
position: relative;
grid-column: 12/13;
grid-row: 1/2;
border: none;
}
.checkout:hover {
background: transparent;
color: transparent;
}
button.checkout:hover img,
button.checkout:hover svg {
-webkit-animation-name: jump;
-ms-animation-name: jump;
-ms-animation-duration: 500ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
@-webkit-keyframes jump {
0% {-webkit-transform: translateY(0px);}
25% {-webkit-transform: translateY(-4px);}
50% {-webkit-transform: translateY(-6px);}
75% {-webkit-transform: translateY(-4px);}
100% {-webkit-transform: translateY(0px);}
}
@-ms-keyframes jump {
0% {-ms-transform: translateY(0px);}
25% {-ms-transform: translateY(-4px);}
50% {-ms-transform: translateY(-6px);}
75% {-ms-transform: translateY(-4px);}
100% {-ms-transform: translateY(0px);}
}
@keyframes jump {
0% {transform: translateY(0px);}
25% {transform: translateY(-4px);}
50% {transform: translateY(-6px);}
75% {transform: translateY(-4px);}
100% {transform: translateY(0px);}
}
button.checkout .cart {
height: 30px;
z-index: 1;
width: 30px;
position: relative;
}
.headerbg button.checkout .cart {
fill: #ffffff;
}
.socials svg {
height: 20px;
z-index: 1;
width: 20px;
}
.headerbg .socials svg {
fill: #f0f54f;
transition: all .2s;
}
button.checkout .load {
height: 22px;
width: 22px;
z-index: -1;
position: absolute;
right: 2px;
top: -4px;
}
.text_block {
margin: 60px 20px;
margin: var(--sixty) var(--twenty);
}
.text_block:last-child {
margin: 60px 20px 20px;
margin: var(--sixty) var(--twenty) var(--twenty);
}
.tour.text_layout .text_block.grid {
margin-bottom: 120px;
}
.text_block > * {
margin: 0 0 40px;
}
.text_layout .text_block.grid .text_block {
margin: 0;
}
.tour .text_block > * {
margin: 0 0 10px;
}
.text_block.grid {
grid-template-columns: repeat(2, 1fr);
}
.text_layout .text_block.grid {
grid-template-areas:
"info info"
"listen listen"
"boxed_text ."
"rslides rslides"
"tracklist tracklist"
"rec rec";
margin: 20px;
margin: var(--twenty);
margin-top: -44px;
}
.text_layout.catalog_item .text_block.grid {
margin-top: -18px;
}
.text_layout.product .text_block.grid {
grid-auto-flow: dense;
grid-template-rows: auto;
grid-template-areas:
"title title"
"rslides rslides"
"purchase purchase"
"info info"
"pressing_info pressing_info"
"listen listen"
"boxed_text ."
"tracklist tracklist"
"rec rec";
}
.text_layout.roster_item .text_block.grid {
grid-template-areas:
"title title"
"rslides rslides"
"pcredit pcredit"
"listen listen"
"members members"
"info info"
"catalog_titles catalog_titles"
"tour_dates tour_dates"
"news_posts news_posts"
"social_urls social_urls"
"boxed_text ."
"press press"
"rec rec";
}
.text_layout.news .text_block.grid {
grid-template-areas:
"title title"
"rslides rslides"
"rslides rslides"
"pcredit pcredit"
"info info";
overflow: visible;
position: relative;
width: calc(100vw - 80px);
margin: 80px auto 0;
}
.text_layout.news .secondary_callout .text_block.grid {
grid-template-areas:
"title title"
"rslides formats"
"rslides formats"
"pcredit pcredit"
"info info";
}
.text_layout.news_post .text_block.grid {
grid-template-areas:
"title title"
"info info"
"news_posts news_posts"
"news news";
overflow: visible;
margin-top: -31px;
}
.news_post .news {
grid-area: news;
}
.text_layout.news .secondary_callout .text_block.grid.news_item .photo {
-webkit-box-shadow: 20px 20px 0px 0px #de6043;
box-shadow: 20px 20px 0px 0px #de6043;
align-self: baseline;
background: #de6043;
border-radius: 4px;
position: relative;
z-index: 2;
}
/*GET TO KNOW*/
/*GET TO KNOW*/
/*GET TO KNOW*/
.text_layout.news .news_wrapper .grid.gettoknow {
grid-template-columns: repeat(4, 1fr);
}
.text_layout.news .text_block.grid.feature.gettoknow header.grid {
grid-template-columns: repeat(4, 1fr);
width: calc(100vw - 40px);
margin: 20px 0 0 -60px;
height: auto;
grid-template-rows: repeat(7, 1fr);
z-index: 999;
text-align: center;
}
.text_layout.news .news_item.feature.gettoknow .photo {
grid-row: 1/2;
background-color: rgb(9, 245, 186);
top: 0;
left: -20px;
right: 0;
grid-column: 1/5;
z-index: 1;
width: calc(100vw - 120px);
}
.text_layout .gettoknow .dot {
margin: 0;
background-color: transparent;
color: #be97ff;
font-size: 4em;
line-height: 28px;
}
.get, .to, .know {
font-weight: 100;
}
.text_layout.news .news_item.feature.gettoknow .info {
margin: 5px 0 0;
grid-area: unset;
grid-column: 1/5;
grid-row: 2/4;
align-self: center;
width: calc(100vw - 160px);
position: relative;
z-index: 999;
}
.text_layout.news .news_wrapper .news_item.feature.gettoknow .bg {
grid-row: 1/2;
background-color: rgb(141, 41, 187);
height: calc(100% + 40px);
top: -20px;
}
.text_layout.news .news_wrapper .news_item.feature.gettoknow .bg::before {
background: #37b9bf;
}
/*END GET TO kNOW*/
/*END GET TO kNOW*/
/*END GET TO kNOW*/
.text_layout.tour .text_block.grid {
grid-template-areas:
"title title"
"rslides rslides"
"tour_dates tour_dates"
"info info"
"social_urls social_urls";
overflow: visible;
}
.text_layout .text_block.grid .tracklist {
grid-area: tracklist;
}
.text_layout .text_block.grid .pressing_info {
grid-area: pressing_info;
}
.text_layout .text_block.grid .listen {
grid-area: listen;
}
.text_layout .text_block.grid .title {
grid-area: title;
margin: 0;
}
.home .grid.home_news {
margin: 0;
}
.text_layout.news .grid.home_news article:first-child {
margin-top: 40px;
}
.text_layout.news .text_block.grid .title {
position: relative;
z-index: 3;
margin: 6px 10px -40px -20px;
width: 100%;
align-self: baseline;
}
.category_item .text_block .title,
.artist_products .text_block .title {
margin: -93px 0 20px;
position: relative;
}
.catalog .text_block .title {
margin: -73px 0 20px;
position: relative;
}
.roster .text_block .title {
margin: 0 0 20px;
position: relative;
}
.text_layout .text_block.grid .info {
grid-area: info;
}
.text_layout .text_block.grid .info h4 {
margin-bottom: 0;
}
.text_layout .text_block.grid .info h4 + p {
margin-top: 0;
}
.text_layout.news_post .text_block.grid .info {
width: 100%;
}
.news_post .info section:nth-child(3),
.news_post .info section:nth-child(4) {
margin-top: 40px;
}
.text_layout.news .text_block.grid .info {
margin: -60px -20px 0 -20px;
z-index: 1;
}
.text_layout.news .text_block.grid .formats {
grid-area: formats;
}
.news .secondary_callout .news_item section.formats {
grid-area: formats;
grid-row: 3/3;
align-self: end;
text-align: right;
grid-column: 1/3;
z-index: 2;
margin: 0;
}
.text_layout .text_block.grid .rec {
grid-area: rec;
}
.product_shots,
.photo {
grid-area: rslides;
z-index: 0;
position: relative;
margin: 0;
}
.pcredit {
grid-area: pcredit;
z-index: 2;
}
.pubdate {
grid-area: pubdate;
display: none;
}
.red_line {
transform: skew(-45deg, 45deg);
background-color: transparent;
transform-origin: top left;
width: 100%;
height: 150%;
display: none;
position: absolute;
z-index: -1;
top: 0;
}
.purchase {
grid-area: purchase;
}
.members {
grid-area: members;
z-index: 1;
}
.press {
grid-area: press;
}
.news_posts {
grid-area: news_posts;
z-index: 1;
}
.catalog_titles {
grid-area: catalog_titles;
}
.tour_dates {
grid-area: tour_dates;
}
.social_urls {
grid-area: social_urls;
z-index: 1;
}
.boxed_text {
grid-area: boxed_text;
color: #f4504a;
align-self: end;
}
.boxed_text span {
border: solid 5px #f4504a;
padding: 20px;
display: block;
}
.boxed_text span span {
border: none;
padding: 0;
line-height: 26px;
}
.news_item.text_block span,
.news_item.text_block p {
line-height: 28px;
background-color: #435cea;
display: inline;
color: #fff;
}
.secondary_callout .news_item.text_block span,
.secondary_callout .news_item.text_block p {
display: block;
z-index: -1;
position: relative;
}
.callout {
border: 2px solid #222;
padding: 40px;
clear: both;
}
.news_post .text_block p,
.news_post .text_block span {
clear: both;
/*float: left;*/
/*width: 100%;*/
}
.news_post .callout {
float: left;
}
span.callout {
display: block;
}
.catalog_item .callout {
display: block;
}
.tour .callout,
.shop .callout,
.home .callout {
margin: 0;
overflow: hidden;
position: relative;
}
.tour .callout.cbg,
.shop .callout.cbg,
.home .callout.cbg {
border: solid 2px transparent;
}
.tour .callout.cbg .blob,
.shop .callout.cbg .blob,
.home .callout.cbg .blob {
position: absolute;
display: block;
width: 100vw;
height: 200vw;
top: -40px;
bottom: 0;
z-index: -1;
}
.news .overflow_fix .blob {
display: none;
}
.tour .callout .bg,
.shop .callout .bg,
.home .callout .bg {
display: block;
position: absolute;
left: -40px;
top: -400px;
opacity: 0.5;
width: 100%;
}
.tour .callout .bg::before,
.shop .callout .bg::before,
.home .callout .bg::before {
background: #8cd9af;
opacity: 0.8;
}
.highlight,
.tour .callout .highlight,
.shop .callout .highlight,
.home .callout .highlight{
background-color: #09f5ba;
}
.shop_art {
margin-bottom: -85px;
margin-top: 15px;
}
.words_art {
grid-row: 5/5;
grid-column: 1/13;
display: block;
}
.news .step_three,
.news .step_four {
display: none;
}
.tour.text_layout .contain .text_block:nth-of-type(1) {
margin-top: 120px;
}
.tour .photo {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
.tour .photo img,
.tour .photo .pcredit {
display: none;
}
.tour.text_layout .contain section.title {
margin-bottom: -15px;
}
.tour .text_block .photo h2 {
display: inline;
}
.subscribe::before {
content: "\2709\00fe0e";
text-decoration: none;
display: inline;
font-family: "Times", "Times New Roman", "serif", "sans-serif", "EmojiSymbols";
font-size: 125%;
padding-right: 2px;
}
.period {
background-color: #222;
width: 100%;
height: auto;
display: inline;
}
.blink {
-webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
animation: 2s linear infinite condemned_blink_effect;
}
/* for Safari 4.0 - 8.0 */
@-webkit-keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
@keyframes condemned_blink_effect {
0% {
visibility: hidden;
}
50% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
.favfinder .highlight {
line-height: 2em;
}
.favfinder .ffroster {
background-position: right 15px top 10px;
padding: 5px 12px;
}
.favfinder a {
line-height: 2em;
}
.no-js .favfinder {
display: none;
}
.information .contain .grid {
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense;
}
.information .span_one,
.information .span_two,
.information .span_three {
grid-column: span 12;
}
.information .span_four,
.information .span_six,
.information .span_eight,
.information .span_nine,
.information .span_ten {
grid-column: span 12;
}
.information .span_full {
grid-column: span 12;
}
.information .contain ul {
margin-bottom: 35px;
}
select {
background: url("data:image/svg+xml;utf8,");
background-color: #00f6b9;
background-repeat: no-repeat;
background-position: right 15px top 17px;
background-size: 16px 16px;
padding: 12px;
width: 100%;
font-size: 100%;
font-weight: bold;
border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-appearance: none;
border: 1px solid #222;
outline: 0;
-webkit-transition: 0.3s ease all;
-moz-transition: 0.3s ease all;
-ms-transition: 0.3s ease all;
-o-transition: 0.3s ease all;
transition: 0.3s ease all;
max-width: 44vw;
display: inline;
min-width: 174px;
cursor: pointer;
}
.headerbg select {
background-image: url("data:image/svg+xml;utf8,");
}
.headerbg .text_block select {
background-image: url("data:image/svg+xml;utf8,");
background-color: transparent;
width: 100%;
max-width: 100%;
margin-bottom: .25em;
}
option {
font-weight: 100;
font-size: 80%;
}
.headerbg option {
color: #222;
}
option[disabled="disabled"],
.headerbg option[disabled="disabled"] {
text-decoration: line-through;
color: #999;
cursor: not-allowed;
}
.button {
color: #fff;
background-color: #f4504a;
border: 0;
padding: 14px;
transition: all .4s;
width: 100%;
}
.button:hover {
transition: all .4s;
-webkit-animation-name: acid;
-ms-animation-name: acid;
-ms-animation-duration: 3000ms;
-webkit-animation-duration: 3000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: inherit;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
@-webkit-keyframes acid {
0% {background-color: #f4504a;}
25% {background-color: #222;}
50% {background-color: #09f5ba;}
75% {background-color: #435cea;}
100% {background-color: #f4504a;}
}
@-ms-keyframes acid {
0% {background-color: #f4504a;}
25% {background-color: #222;}
50% {background-color: #09f5ba;}
75% {background-color: #435cea;}
100% {background-color: #f4504a;}
}
@keyframes acid {
0% {background-color: #f4504a;}
25% {background-color: #222;}
50% {background-color: #09f5ba;}
75% {background-color: #435cea;}
100% {background-color: #f4504a;}
}
.roster_select,
.ffroster,
.category,
.genre,
.year,
.format {
font-weight: normal;
background-color: transparent;
border: 1px solid #00f6b9;
}
.roster_select:hover,
.ffroster:hover,
.category:hover,
.genre:hover,
.year:hover,
.format:hover {
background-color: transparent;
border: 1px solid #222;
}
.headerbg .roster_select,
.headerbg .ffroster,
.headerbg .category,
.headerbg .genre,
.headerbg .year,
.headerbg .format {
color: #00f6b9;
border: 1px solid #00f6b9;
background-image: url("data:image/svg+xml;utf8,");
}
.headerbg.home .ffroster {
color: #222;
}
.headerbg .roster_select:hover,
.headerbg .ffroster:hover,
.headerbg .category:hover,
.headerbg .genre:hover,
.headerbg .year:hover,
.headerbg .format:hover {
color: #43ffd0;
border: 1px solid #43ffd0;
background-image: url("data:image/svg+xml;utf8,");
}
.headerbg.home .ffroster:hover {
color: #222;
border: 1px solid #222;
background-image: url("data:image/svg+xml;utf8,")
}
select:focus, select:active {
outline: 0;
}
.roster_select {
grid-column: 1/13;
grid-row: 2/2;
max-width: 100vw;
display: inline;
min-width: 174px;
}
.category {
grid-column: 1/8;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.genre {
grid-column: 8/13;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.catalog .roster_select {
grid-column: 1/8;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.roster .roster_select {
grid-column: 1/13;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
border: 1px solid #222;
}
.news .roster_select {
grid-column: 1/13;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
border: 1px solid #222;
}
.tour .roster_select {
grid-column: 1/13;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
border: 1px solid #222;
}
.catalog .year {
grid-column: 8/13;
grid-row: 3/3;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.catalog .format {
grid-column: 1/7;
grid-row: 4/4;
max-width: 50vw;
min-width: 50vw;
width: 50vw;
width: 100%;
max-width: 100%;
min-width: 100%;
}
.catalog .genre {
grid-column: 7/13;
grid-row: 4/4;
}
.search-wrap {
align-self: center;
grid-column: 11/12;
grid-row: 1/2;
margin-top: -14px;
text-align: right;
}
.subnav {
grid-row: 4/5;
grid-column: 1/13;
width: auto;
display: inline;
text-transform: lowercase;
}
.subnav a {
padding: 5px;
line-height: 48px;
white-space: nowrap;
}
.catalog header .text_feature,
.roster .text_feature,
.news .text_feature,
.tour .text_feature {
grid-row: 2/2;
grid-column: 1/13;
font-size: 80%;
margin: 20px 0;
align-self: baseline;
}
.catalog header .text_feature a,
.news .text_feature a,
.roster .text_feature a,
.tour .text_feature a {
border: none;
background: #f0f54f;
padding: 0 2px;
}
.catalog header .text_feature a:hover,
.rnews .text_feature a:hover,
.roster .text_feature a:hover,
.tour .text_feature a:hover {
background: #f5e209;
}
.ffroster {
max-width: 8em;
min-width: 8em;
width: 8em;
padding: 6px 0 6px 6px;
background-position: right 11px top 11px;
}
.shop .ffroster,
.home .ffroster,
.headerbg.home .ffroster{
max-width: 5em;
min-width: 5em;
width: 5em;
}
.catalog .bg,
.roster .bg,
.tour .bg {
display: none;
}
.news_section {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
position: relative;
}
.news_section header {
grid-column: 1/7;
grid-row: 1/1;
align-self: auto;
z-index: 1;
margin: 20px 0 0 20px;
}
.news_section h3,
.news h3 {
background: #09f5ba;
display: inline;
padding: 0 2px;
margin-top: 0;
line-height: normal;
}
.news .box h3 {
background: transparent;
}
.news_section footer {
grid-column: 1/7;
grid-row: 1/3;
align-self: center;
color: #09f5ba;
margin: 10px 0 0 20px;
font-size: 2.5vw;
z-index: 1;
display: none;
}
.news_section section {
grid-column: 1/7;
grid-row: 1/3;
position: relative;
margin: 0;
}
.news_section .bg {
-webkit-clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
grid-row: 1/3;
grid-column: 1/7;
background-color: rgb(237, 25, 9);
position: absolute;
top: 250px;
width: 150%;
height: 150%;
}
.news .home_top {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
/*width: 100vw;*/
width: 100%;
}
.featured_vinyl + .text_block .callout {
padding-top: 160px;
}
.text_layout .module.featured_vinyl + .text_block {
grid-row: 2/2;
margin-top: -187px;
align-self: baseline;
}
.news .news_item .bg {
-webkit-clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
background-color: rgb(237, 25, 9);
width: 190vw;
height: 100%;
left: -80px;
position: absolute;
top: -40px;
background-blend-mode: color;
}
.text_layout.news .news_item .info {
margin: -85px 20px 10px;
}
.news.text_layout .news_item.feature {
background-color: #fff;
position: relative;
z-index: 4;
width: calc(100vw - 80px);
padding: 20px 40px;
}
.news.text_layout .news_item.feature .title {
margin: -32px 10px 0 -20px;
}
.news.text_layout .news_item.feature .info {
margin: -60px -20px 20px 100px;
}
.text_layout.news .news_item.feature .photo {
background-image: url("https://s9.limitedrun.com/images/1404178/footer_catalog_bg2.jpg");
background-repeat: no-repeat;
background-position: center;
height: calc(100% + 40px);
width: calc(40vw - 50px);
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
display: block;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
top: -20px;
bottom: 0;
left: -40px;
grid-row-end: info-end;
grid-row-start: 1;
z-index: 1;
}
.news.text_layout .news_item.feature .bg {
background-color: rgb(237, 25, 9);
width: calc(100vw - 80px);
height: 100%;
left: -40px;
top: 0;
position: relative;
background-blend-mode: color;
display: block;
clip-path: none;
grid-column: 1/3;
grid-row: 1/info-end;
border-radius: 4px;
left: 0;
z-index: 0;
clip-path: inherit;
position: absolute;
grid-column: unset;
grid-row: unset;
}
.news .news_item.feature .bg::before {
opacity: 0.35;
background: #c0dd8c;
border-radius: 4px;
}
.news .secondary_callout .news_item .bg {
width: 80vw;
height: 80vw;
top: 20px;
}
.news .news_item .bg.shape_one {
-webkit-clip-path: var(--shape_one);
clip-path: var(--shape_one);
width: 112vw;
}
.news .news_item .bg.shape_two {
-webkit-clip-path: var(--shape_two);
clip-path: var(--shape_two);
width: 134vw;
}
.news .news_item .bg.shape_three {
-webkit-clip-path: var(--shape_three);
clip-path: var(--shape_three);
width: 125vw;
left: -222px;
}
.news .news_item .bg.shape_four {
-webkit-clip-path: var(--shape_four);
clip-path: var(--shape_four);
width: 134vw;
}
.news .news_item .bg.shape_nine {
-webkit-clip-path: var(--shape_nine);
clip-path: var(--shape_nine);
clip-path: var(--shape_nine);
width: 130vw;
left: -24vw;
top: -6vw;
}
.news_post .news-carousel .bg {
-webkit-clip-path: none;
clip-path: none;
background-color: #8e9eb3;
}
.news_post .news-carousel .bg::before {
opacity: .35;
}
/* TOOLTIP */
/* TOOLTIP */
/* TOOLTIP */
.guest_artist_info {
position: absolute;
left: 40px;
display: block;
margin: -80px 0 -40px;
z-index: 999999;
width: 80vw;
opacity: .8;
font-size: 80%;
}
.shop .guest_artist_info {
width: auto;
margin: 0;
left: 0;
opacity: .6;
}
.news .guest_artist_info {
width: auto;
margin: 0;
left: 0;
opacity: .6;
position: relative;
grid-column: 1/8;
margin-left: 0;
grid-row: 5/5;
}
.news.home .guest_artist_info {
position: absolute;
left: 40px;
margin: -80px 0 -40px;
width: 80vw;
opacity: .8;
}
.guest_artist_info .tooltip {
background-color: #f0f54f;
padding: 0 10px;
border-radius: 50%;
cursor: context-menu;
border-bottom: none;
}
.shop .guest_artist_info .tooltip {
right: -80px;
position: absolute;
bottom: -40px;
}
.news .guest_artist_info .tooltip {
right: 0;
position: relative;
bottom: 0;
}
.guest_artist_info:hover,
.shop .guest_artist_info:hover,
.news .guest_artist_info:hover,
.news.home .guest_artist_info:hover {
opacity: 1;
}
@-webkit-keyframes tooltipFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tooltipFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.tooltip {
display: inline-flex;
flex-direction: column;
justify-content: center;
border-bottom: 2px dotted #435cea;
position: relative;
}
.tooltip__label:before {
content: "";
display: flex;
cursor: help;
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
}
.tooltip-dropdown {
display: none;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
padding-top: 32px;
}
.tooltip-dropdown__content {
color: #fff;
background-color: #435cea;
border-radius: 4px;
padding: 8px 12px;
width: 300px;
text-align: left;
display: inline-block;
}
.tooltip--open .tooltip-dropdown {
-webkit-animation: tooltipFadeIn 0.15s;
animation: tooltipFadeIn 0.15s;
display: block;
}
@media (hover: hover) {
.tooltip:hover .tooltip-dropdown {
-webkit-animation: tooltipFadeIn 0.15s;
animation: tooltipFadeIn 0.15s;
display: block;
}
}
.tooltip:hover sup {
transition: all .2s;
-webkit-animation-name: acid_text;
-ms-animation-name: acid_text;
-ms-animation-duration: 2000ms;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: inherit;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
@-webkit-keyframes acid_text {
0% {color: #f4504a;}
25% {color: #222;}
50% {color: #09f5ba;}
75% {color: #435cea;}
100% {color: #f4504a;}
}
@-ms-keyframes acid_text {
0% {color: #f4504a;}
25% {color: #222;}
50% {color: #09f5ba;}
75% {color: #435cea;}
100% {color: #f4504a;}
}
@keyframes acid_text {
0% {color: #f4504a;}
25% {color: #222;}
50% {color: #09f5ba;}
75% {color: #435cea;}
100% {color: #f4504a;}
}
.news_section .bg::before {
background: #93d2cb;
}
.news_section aside {
grid-column: 1/7;
grid-row: 3/3;
align-self: start;
}
.news_section li {
margin-bottom: 15px;
}
.news_section time {
display: none;
}
/* TOUR DATES TABLE */
/* TOUR DATES TABLE */
/* TOUR DATES TABLE */
.rwd-table {
min-width: 300px;
width: 100%;
margin: 0 auto;
height: auto;
font-size: 80%;
}
.rwd-table tr {
border-bottom: 1px solid #F5F4EF;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
padding-top: .5em;
}
.rwd-table td:last-child {
padding-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 6.5em;
display: inline-block;
}
@media (min-width: 480px) {
.rwd-table td:before {
display: none;
}
.rwd-table th, .rwd-table td {
text-align: left;
}
}
@media (min-width: 480px) {
.rwd-table th, .rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child, .rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child, .rwd-table td:last-child {
padding-right: 0;
}
}
.rwd-table {
overflow: hidden;
}
.rwd-table tr {
border-color: #c5ccca;
}
.rwd-table th, .rwd-table td {
margin: .5em 0;
}
@media (min-width: 480px) {
.rwd-table th {
padding: 0 1em 1em !important;
}
.rwd-table td {
padding: 1em !important;
}
}
.rwd-table th, .rwd-table td:before {
color: #f4504a;
}
@media (max-width: 850px) {
.newsnav .box.next.big {
display: none;
}
.newsnav .box.back.big {
display: none;
}
.newsnav {
width: calc(100vw - 60px);
margin: 0 auto;
height: 16vw;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 20px;
grid-gap: var(--twenty);
list-style: none;
content: none;
}
.newsnav .box.back,
.newsnav .box.next {
font-size: 190%;
overflow: visible;
display: block;
align-self: center;
align-content: center;
height: 100%;
list-style: none;
content: none;
}
.newsnav .box.back a,
.newsnav .box.next a {
width: 100%;
height: 100%;
display: block;
list-style: none;
content: none;
}
.newsnav .box.back img,
.newsnav .box.next img {
opacity: 0;
}
.newsnav .box.back span {
bottom: 50%;
position: absolute;
left: -12px;
list-style: none;
content: none;
}
.newsnav .box.next span {
bottom: 50%;
position: absolute;
right: -12px;
list-style: none;
content: none;
}
.newsnav .box.back span.bg,
.newsnav .box.next span.bg {
right: auto;
}
}
@media (min-width: 851px) {
.newsnav {
width: calc(100vw - 60px);
margin: 0 auto;
height: 8vw;
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 20px;
grid-gap: var(--twenty);
list-style: none;
content: none;
}
.newsnav .box.back a,
.newsnav .box.next a {
width: 100%;
height: 100%;
display: block;
list-style: none;
content: none;
}
.newsnav .box.back img,
.newsnav .box.next img {
opacity: 0;
}
.newsnav .box.back span {
bottom: 50%;
position: absolute;
left: -12px;
list-style: none;
content: none;
}
.newsnav .box.next span {
bottom: 50%;
position: absolute;
right: -12px;
list-style: none;
content: none;
}
.newsnav .box.back span.bg,
.newsnav .box.next span.bg {
right: auto;
}
}
footer.footer {
flex-shrink: 0;
background-image: url("https://s9.limitedrun.com/images/1404178/footer_catalog_bg2.jpg");
background-repeat: no-repeat;
background-position: center;
height: auto;
width: auto;
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
bottom: 0;
color: #ffffff;
z-index: 3;
}
.shop footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403730/footer_bg1.jpg");
}
.product footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403732/eg000092580007.jpg");
}
.catalog footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403733/footer_catalog_bg1.jpg");
}
.roster footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403734/000011620009.jpg");
}
.roster_item footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403735/000025090015.jpg");
}
.home footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403736/footer_bg.jpg");
}
.tour footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403737/000016670006.jpg");
}
.information footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403738/000025090020.jpg");
}
.news footer.footer {
background-image: url("https://s9.limitedrun.com/images/1403739/000005910023.jpg");
}
footer .grid {
margin: 0;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, auto);
}
footer .grid ul {
padding: 0;
margin: 0 0 10px;
}
footer .grid li {
list-style: none;
display: inline-block;
font-size: 80%;
}
footer .grid a {
padding: 5px;
line-height: 48px;
font-size: 120%;
}
footer .grid small a {
padding: 2px;
line-height: 48px;
font-size: 100%;
}
footer .grid .logo {
position: relative;
top: 10px;
}
footer .grid .logo a {
display: inline;
}
footer .grid .logo img,
footer .grid .logo svg {
width: 34px;
height: 34px;
}
footer .grid .footer_nav {
grid-column: 1/13;
grid-row: 1/1;
align-self: center;
}
footer .grid .footer_misc {
grid-column: 1/13;
grid-row: 2/2;
}
footer .grid .footer_socials {
grid-column: 1/13;
grid-row: 3/3;
}
footer .grid .footer_legal {
grid-column: 1/13;
grid-row: 4/4;
line-height: 16px;
text-align: right;
}
.footer_legal span::after {
content: "\263a\00fe0e";
text-decoration: none;
display: inline;
font-family: "Times", "Times New Roman", "serif", "sans-serif", "EmojiSymbols";
font-size: 125%;
}
/*VIDEO CALLOUT MODULE*/
/*VIDEO CALLOUT MODULE*/
/*VIDEO CALLOUT MODULE*/
.text_layout .grid.video_callout {
padding: 0;
margin: -15px 0 0 0;
grid-template-columns: repeat(12, 1fr);
}
[data-page-background] {
width: 100%;
/*height: 100vh;*/
height: auto;
position: relative;
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
pointer-events: none;
}
.video_callout_text {
/*border: #222 solid 20px;*/
display: block;
/*padding: 20px;*/
color: #fff;
font-size: 1em;
line-height: 1.4em;
grid-column: 2/12;
align-self: center;
grid-row: 1/2;
pointer-events: all;
position: relative;
z-index: 24;
/*margin: 20px;*/
margin: 40px 0;
mix-blend-mode: normal;
}
.video_callout_text p {
background-color: #222;
display: inline;
}
.video_callout_text a {
font-weight: normal;
}
.video_callout_text a::after {
content: '\A';
white-space: pre;
}
.video_callout video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
grid-row: 1/2;
grid-column: 1/13;
z-index: 23;
}
/* BORDER BOX MODULE */
/* BORDER BOX MODULE */
/* BORDER BOX MODULE */
.border_box.grid.full {
width: 100%;
margin: 60px 0;
padding: 20px;
padding: var(--twenty);
background-repeat: no-repeat;
display: grid;
grid-gap: 20px;
grid-gap: var(--twenty);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr repeat(2, auto) 1fr;
overflow: hidden;
height: auto;
position: relative;
}
.border_box .info {
grid-row: 3/4;
grid-column: 1/5;
z-index: 1;
position: relative;
margin-bottom: 100px;
}
.border_box .info h2,
.border_box .info h3,
.border_box .info small {
background-color: #09f5ba;
padding: 0 2px;
display: inline;
}
.border_box .info span {
background-color: #435cea;
color: #fff;
}
.border_box .album {
grid-row: 2/3;
grid-column: 2/4;
z-index: 1;
position: relative;
align-self: end;
}
.border_box .bg {
z-index: -2;
margin: -20px;
padding: 0;
width: 120vw;
height: 250vw;
position: absolute;
}
.border_box .border {
border-top: 50vw solid rgba(67, 92, 234, .9);
border-bottom: 50vw solid rgba(67, 92, 234, .9);
border-left: 50vw solid rgba(9, 245, 186, .9);
border-right: 50vw solid rgba(9, 245, 186, .9);
z-index: -1;
grid-row: 1/5;
position: relative;
grid-column: 1/5;
margin: -20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#59f2d3+36,59f2d3+36,ccef58+56,feffff+100&0.41+0,0+82 */
background: -moz-linear-gradient(top, rgba(89,242,211,0.41) 0%, rgba(89,242,211,0.23) 36%, rgba(204,239,88,0.13) 56%, rgba(234,248,187,0) 82%, rgba(254,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(89,242,211,0.41) 0%,rgba(89,242,211,0.23) 36%,rgba(204,239,88,0.13) 56%,rgba(234,248,187,0) 82%,rgba(254,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(89,242,211,0.41) 0%,rgba(89,242,211,0.23) 36%,rgba(204,239,88,0.13) 56%,rgba(234,248,187,0) 82%,rgba(254,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6959f2d3', endColorstr='#00feffff',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
}
/* FEATURED ALBUM MODULE */
/* FEATURED ALBUM MODULE */
/* FEATURED ALBUM MODULE */
.featured_grid.grid {
width: 100%;
margin: 60px 0;
background: #e93737;
padding: 20px;
padding: var(--twenty);
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(23, 1fr) auto;
grid-template-rows: repeat(10, auto);
grid-template-areas:
". . . kk . . . . . . . . . . . . . . . . . . ."
". . . . . a . . . . . . b . c . d . e . . . ."
"f . g . . . . . . h . i . j . k . . . . . . ."
". l . m . n . o . . . . . . . . . . . . . . ."
"q . r . s . t . u . . . . p . . . v . . . . ."
". w . x . . y . . . z . ww . . . . . . . . . ."
"aa . . . . . . . . bb . cc . dd . ee . ff . . . . ."
". gg . hh . ii . jj . . . . . . . . . . . . . . ."
". . . . . . . mm . nn . oo . pp . qq . . . ll . . ."
". rr . ss . tt . . . . . uu . vv . . . . . . . . .";
}
.circle {
z-index: 1;
width: 2vw;
margin: 0 -15px;
}
.circle::before {
content: '\2734';
color: #435cea;
font-size: 1.5em;
}
.a {grid-area: a;} .b {grid-area: b;} .c {grid-area: c;} .d {grid-area: d;}
.e {grid-area: e;} .f {grid-area: f;} .g {grid-area: g;} .h {grid-area: h;}
.i {grid-area: i;} .j {grid-area: j;} .k {grid-area: k;} .l {grid-area: l;}
.m {grid-area: m;} .n {grid-area: n;} .o {grid-area: o;} .p {grid-area: p;}
.q {grid-area: q;} .r {grid-area: r;} .s {grid-area: s;} .t {grid-area: t;}
.u {grid-area: u;} .v {grid-area: v;} .w {grid-area: w;} .x {grid-area: x;}
.y {grid-area: y;} .z {grid-area: z;} .aa {grid-area: aa;} .bb {grid-area: bb;}
.cc {grid-area: cc;} .dd {grid-area: dd;} .ee {grid-area: ee;} .ff {grid-area: ff;}
.gg {grid-area: gg;} .hh {grid-area: hh;} .ii {grid-area: ii;} .jj {grid-area: jj;}
.kk {grid-area: kk;} .ll {grid-area: ll;} .mm {grid-area: mm;} .nn {grid-area: nn;}
.oo {grid-area: oo;} .pp {grid-area: pp;} .qq {grid-area: qq;} .rr {grid-area: rr;}
.ss {grid-area: ss;} .tt {grid-area: tt;} .uu {grid-area: uu;} .vv {grid-area: vv;}
.ww {grid-area: ww;}
.featured_grid h2 {
grid-row: 1/1;
grid-column: 1/2;
z-index: 2;
font-size: 2.5em;
display: inline;
align-self: start;
margin: 60px 0 0 0;
background: #435cea;
}
.featured_grid h3 {
grid-row: 4/4;
grid-column: 10/17;
z-index: 2;
font-size: 2em;
display: inline-block;
align-self: start;
font-style: italic;
}
.featured_grid .blurb {
display: none;
grid-row: 1/1;
grid-column: 10/20;
z-index: 2;
font-size: 80%;
text-align: left;
margin-top: 60px;
}
.featured_grid .formats {
grid-row: 9/11;
grid-column: 24/24;
z-index: 2;
font-size: 80%;
text-align: right;
}
.featured_grid aside {
grid-row: 2/3;
grid-column: 24/25;
z-index: 2;
font-size: 80%;
display: inline;
background: transparent;
align-self: self-end;
font-style: italic;
text-align: right;
}
.featured_grid img.artist {
grid-row: 4/11;
grid-column: 1/12;
width: 100%;
filter: grayscale(40%) saturate(100%) sepia(50%) opacity(35%);
margin: 0 -20px 0 0;
}
.featured_grid img.album {
grid-row: 1/1;
grid-column: 20/25;
width: 100%;
}
/* OUTLINE MODULE */
/* OUTLINE MODULE */
/* OUTLINE MODULE */
.home.text_layout .grid.outline_callout {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, auto);
border: 20px solid #6262a2;
outline: 20px dashed #3f3738;
outline-offset: -20px;
margin: 0;
padding: 20px;
}
.outline_callout .callout {
grid-column: 1/13;
grid-row: 3/4;
padding: 0;
border: none;
font-size: 80%;
}
.outline_callout .album {
grid-column: 1/13;
grid-row: 1/1;
}
.outline_callout .formats {
grid-column: 1/13;
grid-row: 4/4;
text-align: right;
}
.home .outline_callout header {
grid-column: 1/13;
grid-row: 2/2;
}
.text_layout .contain .outline.full.module {
margin-bottom: 120px;
margin-top: -15px;
padding: 0;
border: 20px solid #7e7fb6;
outline: 20px dashed #54797a;
outline-offset: -20px;
}
.outline_two {
border: 20px solid #9dc597;
outline: 20px dashed #f2c691;
outline-offset: -20px;
}
.outline_three {
border: 20px solid #db6c4e;
outline: 20px dashed #9eccdb;
outline-offset: -20px;
}
/* FEATURED NEWS POST MODULES*/
/* FEATURED NEWS POST MODULES*/
/* FEATURED NEWS POST MODULES*/
.full.module.featured_post {
margin: 80px -20px 0;
background: #fff;
z-index: 420;
position: relative;
}
.news.text_layout .contain > section.featured_post {
margin: 60px 0;
}
.featured_post .grid {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, auto);
margin: 0;
}
.featured_post h2 {
grid-column: 2/12;
grid-row: 13/13;
z-index: 2;
background: transparent;
margin-top: -37px;
line-height: 33px;
text-align: center;
}
.featured_post img {
grid-column: 1/7;
grid-row: 1/13;
position: relative;
z-index: 0;
align-self: center;
border-radius: 0;
outline: 10px dashed #4a59aa;
border: solid 20px #ff542d;
right: -60px;
max-width: 400px;
margin: 60px 0 60px auto;
}
.featured_post .radial {
background: rgb(9,245,186);
background: radial-gradient(circle, rgb(234, 77, 16) 35%, rgba(255,255,255,0) 75%);
position: relative;
z-index: -2;
right: 0%;
grid-column: 1/11;
grid-row: 1/13;
display: block;
}
.news .featured_post .left_side {
grid-column: 1/9;
grid-row: 1/13;
z-index: -1;
position: relative;
width: 100%;
}
.featured_post .right_side {
grid-column: 7/13;
grid-row: 1/13;
z-index: 1;
background: rgba(48, 174, 162, 1);
background: linear-gradient(333deg, rgb(46, 191, 154) 0%, rgb(48, 174, 162) 54%);
margin-left: -20px;
position: relative;
}
.featured_post .quote {
grid-column: 7/13;
grid-row: 5/9;
position: relative;
z-index: 2;
padding: 20px;
display: block;
margin-right: 20px;
font-style: italic;
font-weight: bold;
font-size: .8em;
}
.featured_post .quote::before {
content: '\201C';
font-size: 8em;
opacity: 0.2;
position: absolute;
top: 40px;
left: -6px;
}
.featured_post .quote_source {
font-size: .625em;
font-style: normal;
font-weight: lighter;
display: block;
line-height: 1.5em;
margin-top: 1.5em;
}
.featured_post_two {
top: 15px;
}
.featured_post.two img {
outline: 10px dashed #c83ea5;
border: solid 20px #09f5ba;
}
.featured_post.two .radial {
background: rgb(9,245,186);
background: radial-gradient(circle, rgb(207, 234, 16) 35%, rgb(9,245,186) 75%);
}
.two .left_side.bg::before {
background: #274fc1;
opacity: 0.4;
}
.featured_post.two .right_side {
background: rgb(115, 106, 221);
background: linear-gradient(333deg, rgb(60, 56, 153) 0%, rgb(115, 106, 221) 54%);
}
.featured_post.two .quote {
color: #fff;
}
/* FEATURED VINYL MODULE */
/* FEATURED VINYL MODULE */
/* FEATURED VINYL MODULE */
.featured_vinyl.grid.full {
padding: 0;
}
.news .featured_vinyl .module {
overflow: hidden;
}
.featured_vinyl.grid {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 0 10vh 10vh 10vh 0 10vh 0;
align-items: end;
grid-row: 1/1;
width: calc(100vw - 80px);
}
.featured_vinyl .artist {
grid-column: 3/12;
grid-row: 2/6;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
background-image: url("https://s9.limitedrun.com/images/1699080/photo_by_Yoshiharu_Ota_1__square_.jpg");
background-color: #435cea;
background-size: cover;
overflow: hidden;
border-radius: 4px;
background-blend-mode: darken;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.featured_vinyl .bg,
.news .featured_vinyl .bg {
-webkit-clip-path: polygon(15% 2%, 13% 4%, 9% 7%, 9% 15%, 9% 19%, 9% 23%, 11% 29%, 15% 34%, 17% 35%, 21% 38%, 22% 44%, 20% 50%, 19% 55%, 19% 61%, 23% 71%, 30% 80%, 41% 86%, 47% 87%, 53% 88%, 61% 90%, 72% 90%, 92% 91%, 94% 80%, 93% 48%, 94% 37%, 73% 36%, 67% 37%, 61% 47%, 43% 10%, 32% 2%, 24% 0);
clip-path: polygon(15% 2%, 13% 4%, 9% 7%, 9% 15%, 9% 19%, 9% 23%, 11% 29%, 15% 34%, 17% 35%, 21% 38%, 22% 44%, 20% 50%, 19% 55%, 19% 61%, 23% 71%, 30% 80%, 41% 86%, 47% 87%, 53% 88%, 61% 90%, 72% 90%, 92% 91%, 94% 80%, 93% 48%, 94% 37%, 73% 36%, 67% 37%, 61% 47%, 43% 10%, 32% 2%, 24% 0);
/*width: calc(100vw - 40px);*/
width: auto;
height: 50vh;
object-fit: cover;
grid-column: 1/13;
grid-row: 1/8;
z-index: 1;
background-color: rgba(165, 42, 42, 1);
left: -14px;
}
.featured_vinyl .formats {
grid-column: 8/12;
grid-row: 4/4;
z-index: 10;
margin: 80px -60px -20px auto;
align-self: center;
text-align: right;
color: #09f5ba;
}
.featured_vinyl header,
.news .featured_vinyl header {
grid-column: 3/9;
grid-row: 2/5;
z-index: 10;
margin: 40px auto auto -10px;
}
.featured_vinyl h2 {
font-size: 4vw;
display: inline;
}
.featured_vinyl h3 {
background: #09f5ba;
font-size: 3vw;
font-style: italic;
margin-top: 0;
display: inline;
padding: 0px 4px;
}
.featured_vinyl aside {
z-index: 2;
line-height: normal;
font-size: 6vw;
position: relative;
transform: rotate(270deg);
margin: 0;
align-self: center;
}
.featured_vinyl aside.l {
grid-column: 1/2;
grid-row: 3/4;
display: none;
}
.featured_vinyl aside.r {
grid-column: 12/12;
grid-row: 1/3;
margin-left: -20px;
}
.featured_vinyl .l .cat_num {
position: absolute;
right: 0;
top: -60px;
overflow: hidden;
}
.featured_vinyl .r .cat_num {
position: absolute;
right: 0;
overflow: hidden;
}
.featured_vinyl .album {
grid-column: 2/7;
grid-row: 6/7;
border-radius: 3px;
z-index: 9;
max-width: ;
}
.featured_vinyl img.vinyl {
grid-row: 6/7;
transition-property: transform;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: 1;
transition-timing-function: ease;
}
.featured_vinyl img.vinyl.one {
animation-delay: .15s;
grid-column: 4/9;
z-index: 8;
}
.featured_vinyl img.vinyl.two {
transition-delay: .25s;
grid-column: 5/10;
z-index: 7;
}
.featured_vinyl img.vinyl.three {
transition-delay: .35s;
grid-column: 6/11;
z-index: 6;
}
.featured_vinyl + .text_block {
z-index: 0;
position: relative;
margin-top: -170px;
background: rgba(9, 245, 186, .2);
grid-row: 2/2;
}
.featured_vinyl + .text_block .callout {
display: block;
padding-top: 160px;
border: none;
}
.text_layout.news .secondary_callout {
grid-row: 3/3;
margin-bottom: 40px;
margin-bottom: var(--forty);
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* ZSQUARE MODULE */
/* ZSQUARE MODULE */
/* ZSQUARE MODULE */
.catalog_item.text_layout .zsquare.grid.full {
margin: -150px 0 0;
top: 0;
position: relative;
padding-top: 150px;
z-index: 0;
}
.zsquare {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(13, 1fr);
padding: 0 40px;
background-repeat: no-repeat;
background-position: center;
height: 150vw;
width: auto;
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
bottom: 0;
color: #ffffff;
box-sizing: border-box;
z-index: 0;
}
.zsquare div {
border-radius: 4px;
max-width: 100%;
}
.zsquare_one {
grid-column: 1/ span 12;
grid-row: 2/ span 12;
z-index: 1;
}
.zsquare_one.bg {
-webkit-filter: none;
filter: none;
opacity: .35;
}
.catalog_item .zsquare_one.bg::before,
.catalog_item .zsquare_four.bg::before,
.catalog_item .zsquare_seven.bg::before {
background: #de6f43;
opacity: .15;
}
.catalog_item .zsquare_one.bg {
display: block;
-webkit-clip-path: var(--shape_ten);
clip-path: var(--shape_ten);
position: absolute;
top: -54px;
width: 80vw;
height: 60vw;
right: -12%;
transform: rotate(154deg);
max-width: 134%;
overflow: hidden;
opacity: 1;
z-index: 0;
}
.zsquare_two {
grid-column: 1/ span 12;
grid-row: 1 / span 12;
}
.zsquare .cat_num {
font-size: 30px;
z-index: 8;
position: relative;
}
.zsquare_three {
grid-column: 2/ span 10;
grid-row: 2/ span 10;
z-index: 3;
position: relative;
background-blend-mode: darken;
bottom: 0;
box-sizing: border-box;
}
.zsquare_three span {
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
bottom: 0;
opacity: .5;
display: block;
background-size: 200%;
}
.zsquare .zsquare_four {
background-image: url("https://topshelfrecords.co/redesign/files/Squiggles--Arvin61r58.svg");
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
position: relative;
background-size: cover;
background-blend-mode: overlay;
grid-row: 5/ span 4;
grid-column: 4/ span 6;
z-index: -1;
opacity: 0.8;
}
.catalog_item .zsquare_four.bg {
display: block;
-webkit-clip-path: var(--shape_three);
clip-path: var(--shape_three);
position: absolute;
top: 44px;
width: 60vw;
height: 60vw;
left: -3%;
transform: rotate(-33deg);
max-width: 60vw;
overflow: hidden;
opacity: 1;
}
.zsquare_five {
grid-row: 3 / span 8;
grid-column: 3 / span 8;
z-index: 5;
align-self: center;
}
.zsquare img {
width: 100%;
height: 100%;
}
.zsquare_six {
grid-column: 11/span 2;
grid-row: 2/span 10;
z-index: 8;
display: none;
}
.zsquare .zsquare_seven {
background-image: url("https://topshelfrecords.co/redesign/files/Squiggles--Arvin61r58.svg");
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
position: relative;
background-size: cover;
background-blend-mode: overlay;
grid-row: 5/ span 6;
grid-column: 4/ span 6;
z-index: 4;
opacity: 0.35;
}
.catalog_item .zsquare_seven.bg {
display: block;
-webkit-clip-path: var(--shape_ten);
clip-path: var(--shape_ten);
position: absolute;
bottom: -51px;
width: 60vw;
height: 60vw;
right: 20%;
transform: rotate(-33deg);
max-width: 60vw;
overflow: hidden;
opacity: 1;
}
.zsquare svg {
overflow: visible;
z-index: 4;
grid-column: 1/ span 2;
position: relative;
}
.zsquare_radial_one {
background: radial-gradient(circle, rgba(67,92,234,1) 0%, rgba(67,92,234,0) 50%);
z-index: -2;
position: absolute;
top: 8vh;
left: -21vw;
width: 100%;
height: 100%;
opacity: 0.8;
}
.zsquare_radial_two {
background: radial-gradient(circle, rgba(67,92,234,1) 0%, rgba(67,92,234,0) 50%);
z-index: -2;
position: absolute;
bottom: 20vh;
width: 100%;
right: -30vw;
height: 100%;
opacity: 0.7;
}
.zsquare_radial_three {
background: radial-gradient(circle, rgba(67,92,234,1) 0%, rgba(67,92,234,0) 50%);
z-index: -1;
position: absolute;
top: 12vh;
width: 100%;
height: 100%;
opacity: 0.6;
left: 12%;
}
.zsquare .left {
bottom: -35%;
position: absolute;
left: 60px;
grid-column: 1/3;
width: 200%;
height: 100%;
}
.zsquare .right {
bottom: -35%;
position: absolute;
left: 60px;
grid-column: 10/12;
width: 200%;
height: 100%;
}
.zsquare text {
text-transform: uppercase;
font-size: 10px;
stroke: #f4504a;
}
.zsquare .left text {
transform: rotate(270deg);
}
.zsquare .right text {
transform: rotate(90deg);
}
.zsquare .contours {
z-index: 4;
grid-column: 1/12;
position: absolute;
grid-row: 1/12;
width: 80vh;
width: calc(var(--vh, 1vh) * 80);
padding: 0;
height: 80vh;
height: calc(var(--vh, 1vh) * 100);
top: -150%;
left: -50%;
margin: 0;
}
.zsquare .contours image {
height: 25vh;
height: calc(var(--vh, 1vh) * 25);
display: block;
}
/* TEN SQUARES MODULE */
/* TEN SQUARES MODULE */
/* TEN SQUARES MODULE */
.grid.ten_squares {
grid-auto-flow: dense;
overflow: visible;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"section_title section_title"
"a b"
"c d"
"e f"
"g h"
"i j";
}
.text_block .grid.ten_squares {
margin: 0;
}
.box {
display: inline-block;
margin: 0;
text-align: left;
position: relative;
}
.box .title_text {
font-size: 80%;
}
.text_block .box h4 {
}
.text_block .box h5 {
font-style: italic;
}
.box_a {
grid-area: a;
}
.box_b {
grid-area: b;
}
.box_c {
grid-area: c;
}
.box_d {
grid-area: d;
}
.ten_squares .section_title,
.shop .section_title {
font-size: 80%;
}
.catalog .section_title {
font-size: 100%;
}
.box.section_title {
font-size: 80%;
grid-area: section_title;
align-self: center;
line-height: 28px;
}
.box.section_title span {
margin: 20px 0;
display: block;
}
.catalog .box.section_title {
grid-column: span 2;
grid-row: span 3;
}
.catalog .section_title.highlight {
display: flex;
flex-direction: column;
height: 100%;
}
.catalog .section_title span,
.roster .section_title span,
.tour .section_title span {
flex-grow: 1;
}
.catalog .section_title a {
overflow: hidden;
background: none;
flex-grow: 0;
}
.catalog .section_title h2,
.roster .section_title h2,
.tour .section_title h2 {
color: #000;
}
.catalog .section_title div {
align-self: start;
flex-grow: 1;
padding: 20px;
border-radius: 4px 4px 0 0;
background-image: url("https://s9.limitedrun.com/images/1404732/v600_footer_catalog_bg2.jpg");
background-repeat: no-repeat;
background-position: center;
height: auto;
width: auto;
position: relative;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
bottom: 0;
color: #ffffff;
}
.catalog .section_title div.inti {
background-image: url("https://s9.limitedrun.com/images/1578490/v600_Image_from_iOS.jpg");
}
.catalog .section_title div.kevin {
background-image: url("https://s9.limitedrun.com/images/1404734/v600_00170001_copy.jpg");
}
.catalog .section_title div.sarah {
background-image: url("https://s9.limitedrun.com/images/1577795/v600_Image_from_iOS.jpg");
}
.catalog .section_title div.seth {
background-image: url("https://s9.limitedrun.com/images/1577796/v600_IMG_6708.jpg");
}
.catalog .section_title div.tyler {
background-image: url("https://s9.limitedrun.com/images/1404732/v600_footer_catalog_bg2.jpg");
}
.catalog .section_title div.will {
background-image: url("https://s9.limitedrun.com/images/1404733/v600_feature_will.jpg");
}
.catalog .section_title img {
border-radius: 0 0 4px 4px;
min-width: 100%;
}
.box_e {
grid-area: e;
}
.box_f {
grid-area: f;
}
.box_g {
grid-area: g;
}
.box_h {
grid-area: h;
}
.box_i {
grid-area: i;
}
.box_j {
grid-area: j;
}
.box a {
text-decoration: none;
display: inline;
padding: 0;
}
.grid.ten_squares div,
.grid.ten_squares li {
margin: 0;
position: relative;
}
.grid.full.padded .bg {
position: absolute;
}
.grid.ten_squares .box img {
max-width: 100%;
min-width: 100%;
display: block;
position: relative;
}
.grid.ten_squares .box a.title_text {
position: absolute;
left: 0;
padding: 10px;
color: #111;
background: #f0f54f;
height: auto;
margin-bottom: 0;
line-height: normal;
}
.roster .grid.ten_squares .box a.title_text {
padding: 14px;
}
.grid.ten_squares .title_text h3 {
margin: 0 0 4px;
padding: 0;
color: #111;
font-style: italic;
}
.roster .grid.ten_squares .title_text h3 {
font-style: normal;
font-weight: 100;
}
.grid.ten_squares .title_text span:before,
.carousel-cell h5:before,
.carousel-cell h5:before:not(.roster-item-carousel .carousel-cell h5) {
content: 'by ';
opacity: .5;
}
.section_title a {
padding: 0 2px;
}
.catalog .section_title.highlight a {
padding: 0;
}
.carousel .section_title,
.carousel.roster-item-slider .section_title {
grid-area: roster-item;
margin: 20px 0 -17px 20px;
margin: var(--twenty) 0 -17px var(--twenty);
position: relative;
z-index: 2;
}
.carousel.roster-item-slider .section_title {
z-index: 24;
}
.featured_artist_text,
.homepage_carousel_text {
color: #fff;
font-size: 80%;
line-height: 26px;
display: block;
}
.featured_artist_text::after {
content: 'A blend of minimal phrased piano and dynamic drumming. The pursuit of a live experience...';
}
.grid.ten_squares .box {
overflow: hidden;
}
.grid.ten_squares .box.back,
.grid.ten_squares .box.next {
font-size: 400%;
overflow: visible;
align-self: center;
align-content: center;
height: 100%;
}
.grid.ten_squares .box.back a,
.grid.ten_squares .box.next a {
width: 100%;
height: 100%;
display: block;
}
.grid.ten_squares .box.next img {
opacity: 0;
}
.grid.ten_squares .box.next span {
bottom: 50%;
position: absolute;
right: -12px;
}
.grid.ten_squares .box.next span.bg {
right: auto;
}
.grid.ten_squares .box.back span {
bottom: 50%;
position: absolute;
left: -12px;
}
.grid.ten_squares .title_text {
width: 100%;
top: auto;
bottom: 0;
}
.grid.ten_squares .box:hover a.title_text {
transform: translateY(100%);
transition: transform 0.4s, opacity 0.3s;
}
.no-touch .grid.ten_squares .box:hover .title_text,
.grid.ten_squares .box.cs-hover .title_text {
opacity: 1;
}
/* TOPSHELF GRID */
/* TOPSHELF GRID */
/* TOPSHELF GRID */
.news.text_layout .full.module.topshelf_header {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(3, 1fr);
margin-top: -42px;
margin-bottom: 0;
overflow: hidden;
}
.topshelf_header .info {
grid-row: 1/4;
grid-column: 1/13;
margin-bottom: 280px;
z-index: 1;
}
.topshelf_header .info p {
color: #222;
background: transparent
display: block;
}
.no_break {
break-inside: avoid;
}
.no_break span {
display: block;
}
.line_center {
text-align: center;
}
.line_right {
text-align: right;
}
.topshelf_header .info p:last-child {
margin-bottom: 0;
}
.guest_artwork_bg_wrap {
grid-column: 1/13;
grid-row: 3/4;
position: relative;
overflow: visible;
bottom: -40px;
}
.guest_artwork_bg {
z-index: -1;
position: absolute;
width: 102vw;
display: block;
bottom: -244px;
left: -20px;
fill: #222;
height: 600px;
}
.guest_artwork_bg_wrap .bg.shape_three {
z-index: -2;
opacity: 0.8;
clip-path: var(--shape_three);
height: 120vw;
bottom: -280px;
position: absolute;
width: 149vw;
left: -29vw;
transform: rotate(88deg);
}
.guest_artwork_bg_wrap .bg::before {
background: #09f5ba;
}
.text_layout .grid.topshelf {
grid-gap: 0;
margin: 0;
}
.topshelf img {
border-radius: 0;
}
.topshelf .empty img,
.topshelf .has_bg img {
opacity: 0;
}
.grid.topshelf .box {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-blend-mode: darken;
}
.grid.topshelf .box.product {
background-color: #f0f54f;
}
.grid.topshelf .box.has_letter {
background-color: #de6043;
z-index: -1;
}
.grid.topshelf .box.has_letter.has_bg {
background-color: #de6043;
}
.grid.topshelf .has_letter .letter {
color: #fff;
font-size: 6em;
position: absolute;
top: 42%;
left: 33%;
z-index: 666;
}
.grid.topshelf .has_bg span {
bottom: 0;
}
.grid.topshelf .has_bg {
overflow: hidden;
}
.grid.topshelf .has_bg .bg {
-webkit-clip-path: var(--shape_one);
clip-path: var(--shape_one);
transform: rotate(179deg);
top: 26px;
width: 75vw;
height: 75vw;
left: 0;
position: absolute;
z-index: -1;
overflow: hidden;
}
.grid.topshelf .has_bg .bg::before {
opacity: 0.24;
background: #09f5ba;
}
.grid.topshelf .has_bg .bg.alt_nine {
-webkit-clip-path: var(--shape_four);
clip-path: var(--shape_four);
}
.grid.topshelf .has_bg .bg.alt_six {
-webkit-clip-path: var(--shape_seven);
clip-path: var(--shape_seven);
}
.grid.topshelf .has_bg .bg.alt_seven {
-webkit-clip-path: var(--shape_six);
clip-path: var(--shape_six);
}
.grid.topshelf .has_bg .bg.alt_eight {
-webkit-clip-path: var(--shape_eight);
clip-path: var(--shape_eight);
}
/* FLICKITY */
/* FLICKITY */
/* FLICKITY */
.rslides.no_buttons .flickity-button {
display: none;
}
.rslides .flickity-button {
opacity: 0;
transition: all 2s;
}
.rslides:hover .flickity-button {
opacity: 1;
transition: all .4s;
}
.product .flickity-viewport,
.catalog_item .flickity-viewport {
overflow: hidden;
}
.product .rslides,
.catalog_item .rslides {
overflow: visible;
}
.product .flickity-prev-next-button,
.catalog_item .flickity-prev-next-button {
top: calc(100% - 40px);
}
.carousel {
margin: 20px 0;
margin: var(--twenty) 0;
}
.news_post .carousel,
.news-carousel {
margin: 0;
overflow: hidden;
}
.rslides.carousel {
height: 100%;
padding-bottom: 100%;
}
.rslides.carousel .flickity-viewport {
position: absolute;
width: 100%;
transition: height 0.2s;
}
.news_post .flickity-viewport {
transition: height 0.2s;
}
.rslides .carousel-cell {
width: 100%;
height: 100%
}
.rslides .flickity-page-dots {
bottom: 10px;
}
.main-carousel {
background: transparent;
height: inherit;
width: 100%;
overflow-x: hidden;
}
.roster-item-slider {
display: grid;
grid-template-areas: "roster-item slider1 slider2";
grid-template-columns: 1fr 80px 2fr;
background-color: rgba(67, 92, 234, 1);
overflow: hidden;
margin-top: 60px;
}
.roster-item-bg {
grid-area: roster-item;
background-image: url("https://s9.limitedrun.com/images/1260332/v600_motkwebsite.jpg");
background-repeat: no-repeat;
height: auto;
width: auto;
position: relative;
-webkit-filter: contrast(100%) brightness(140%) saturate(200%);
filter: contrast(100%) brightness(140%) saturate(200%);
opacity: .1;
z-index: 0;
background-size: cover;
background-color: rgba(67, 92, 234, 1);
background-position: center;
}
.news .roster-item-bg {
background-image: url("https://s9.limitedrun.com/images/1413505/v600_Photo_Apr_20__11_21_17_PM.jpg?type=image/jpeg");
}
.roster-item-bg-fade {
grid-area: slider1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#435cea+0,435cea+100&0+0,1+63,1+100 */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00435cea', endColorstr='#435cea',GradientType=1 ); /* IE6-9 */ */
background: -moz-linear-gradient(left, rgba(67,92,234,0) 0%, rgba(67,92,234,1) 63%, rgba(67,92,234,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(67,92,234,0) 0%,rgba(67,92,234,1) 63%,rgba(67,92,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(67,92,234,0) 0%,rgba(67,92,234,1) 63%,rgba(67,92,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
transform: rotate(-5deg);
height: 140%;
width: 200%;
top: -15px;
left: -109px;
position: relative;
z-index: 3;
grid-row: 1/2;
}
.roster-item-carousel.main-carousel {
grid-column-start: slider1;
grid-column-end: slider2;
z-index: 2;
grid-row: 1/2;
}
.carousel-cell a {
position: relative;
padding: 0;
margin: 0 10px;
display: block;
height: auto;
}
.carousel a:not(.carousel-cell a) {
top: -24px;
margin: 0;
}
.carousel-cell {
width: 150px;
height: auto;
margin: 40px 20px 20px 0;
margin: 40px var(--twenty) var(--twenty) 0;
background: transparent;
counter-increment: gallery-cell;
}
.carousel-cell img {
height: 150px;
max-height: 150px;
transition: opacity 0.4s;
opacity: 0;
max-width: unset;
}
.rslides .carousel-cell,
.rslides .carousel-cell img {
height: 100%;
width: 100%;
}
.category-carousel .carousel-cell img,
.roster-item-carousel .carousel-cell img {
width: 150px;
max-width: 150px;
height: 150px;
max-height: 150px;
min-height: auto;
}
.rslides .carousel-cell {
margin: 0 20px 20px 0;
}
.carousel-cell a:not(.carousel-title) {
background: transparent;
}
.news .playlists .carousel-cell a:not(.carousel-title) {
background: #f0f54f;
display: inline;
margin: 0;
line-height: 1.5em;
font-size: 80%;
}
.carousel-cell:hover a {
background: #f5e209;
transition: all .2s;
border-radius: 4px;
}
.playlists .carousel-cell:hover a {
border-radius: 0;
}
.news .playlists .carousel-cell a:not(.carousel-title):hover {
background: #f5e209;
}
.carousel-cell .carousel-title {
display: inline-block;
line-height: normal;
position: relative;
top: -24px;
margin: 0 0 0 20px;
margin: 0 0 0 var(--twenty);
padding: 1px 3px;
}
.carousel-cell:hover a.carousel-title {
border-radius: 0;
}
.carousel-cell h4 {
display: inline;
font-style: italic;
}
.news .playlists.carousel h4 {
background: #09f5ba;
padding: 0 2px;
}
.carousel-cell h5 {
display: inline;
}
.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
opacity: 1;
align-self: center;
}
.news_post .carousel-cell-image {
max-height: 80vh;
min-height: 30vh;
height: 100%;
width: auto;
border-radius: 0;
}
.news_post .carousel-cell-image.flickity-lazyloaded,
.news_post .carousel-cell-image.flickity-lazyerror {
min-height: 30vh;
}
.news_post .category-carousel .carousel-cell-image.flickity-lazyloaded,
.news_post .category-carousel .carousel-cell-image.flickity-lazyerror {
min-height: auto;
}
.text_feature {
position: relative;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "section section" "q1 q1" "q2 q2" "q3 q3";
}
.shop .text_feature {
margin-bottom: 60px;
}
.text_feature .section_title {
grid-area: section;
}
.text_feature a {
height: auto;
margin-top: 0;
padding: 0;
border: 1em solid #f5e209;
}
.shop .text_feature span a {
border: 0 none transparent;
}
.shop .text_feature span::after {
content: '\2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193 \2193';
text-align: center;
margin: auto;
width: 100%;
display: block;
}
.text_feature .q1:hover blockquote::after {
content: "nice!";
text-align: right;
color: #e93737;
font-style: italic;
float: right;
z-index: 1;
position: absolute;
display: block;
right: 12px;
}
.text_feature .q2:hover blockquote::after {
content: "good choice!";
text-align: right;
color: #e93737;
font-style: italic;
float: right;
z-index: 1;
position: absolute;
display: block;
right: 12px;
}
.text_feature .q3:hover blockquote::after {
content: "yooooooo";
text-align: right;
color: #e93737;
font-style: italic;
float: right;
z-index: 1;
position: absolute;
display: block;
right: 12px;
}
.q1 {
grid-area: q1;
}
.q2 {
grid-area: q2;
}
.q3 {
grid-area: q3;
}
blockquote {
line-height: 1em;
display: block;
padding: 1em;
margin: 0;
text-align: justify;
position: relative;
}
.text_block blockquote {
line-height: 1.5em;
padding: 0 0 0 1em;
border-left: 1em solid #f4504a;
margin: 1em 0em;
font-style: italic;
clear: both;
}
.press blockquote strong,
.press blockquote b {
font-style: normal;
}
.news .lol_top {
flex: 0 0 auto;
line-height: .5em;
font-size: .5em;
position: relative;
width: calc(100vw - 40px);
}
.news.home .lol_top {
top: 20px;
top: var(--twenty);
padding: 0 10px;
}
.lol_top p {
font-size: 1.25vw;
position: relative;
color: #fff;
z-index: 1;
margin: 0 0 0 -20px;
width: calc(100vw - 40px);
text-align: left;
}
.lol_top p.classcii {
text-align: left;
border: none;
margin: 20px 0 0 0;
font-size: 1.25em;
line-height: 1.25em;
}
.cat_num {
font-size: 100%;
}
.cat_num span {
background-repeat: no-repeat;
}
.cat_num span::before {
color: rgba(9, 245, 186, 0);
}
.cat_num span span {
background-repeat: no-repeat;
height: 100px;
width: 100px;
position: relative;
-webkit-filter: contrast(100%) brightness(140%) saturate(200%);
filter: contrast(100%) brightness(140%) saturate(200%);
opacity: 0.75;
display: inline;
color: #09f5ba;
}
.cat_num span[data-letter="t"] {
background-image: url("https://topshelfrecords.co/redesign/svg/T_scanner_text-01.svg");
}
.cat_num span[data-letter="s"] {
background-image: url("https://topshelfrecords.co/redesign/svg/S_scanner_text-01.svg");
}
.cat_num span[data-letter="r"] {
background-image: url("https://topshelfrecords.co/redesign/svg/R_scanner_text-01.svg");
}
.cat_num span[data-letter="c"] {
background-image: url("https://topshelfrecords.co/redesign/svg/C_scanner_text-01.svg");
}
.cat_num span[data-letter="-"] {
background-image: url("https://topshelfrecords.co/redesign/svg/-_scanner_text-01.svg");
}
.cat_num span[data-letter="0"] {
background-image: url("https://topshelfrecords.co/redesign/svg/0_scanner_text-01.svg");
}
.cat_num span[data-letter="1"] {
background-image: url("https://topshelfrecords.co/redesign/svg/1_scanner_text-01.svg");
}
.cat_num span[data-letter="2"] {
background-image: url("https://topshelfrecords.co/redesign/svg/2_scanner_text-01.svg");
}
.cat_num span[data-letter="3"] {
background-image: url("https://topshelfrecords.co/redesign/svg/3_scanner_text-01.svg");
}
.cat_num span[data-letter="4"] {
background-image: url("https://topshelfrecords.co/redesign/svg/4_scanner_text-01.svg");
}
.cat_num span[data-letter="5"] {
background-image: url("https://topshelfrecords.co/redesign/svg/5_scanner_text-01.svg");
}
.cat_num span[data-letter="6"] {
background-image: url("https://topshelfrecords.co/redesign/svg/6_scanner_text-01.svg");
}
.cat_num span[data-letter="7"] {
background-image: url("https://topshelfrecords.co/redesign/svg/7_scanner_text-01.svg");
}
.cat_num span[data-letter="8"] {
background-image: url("https://topshelfrecords.co/redesign/svg/8_scanner_text-01.svg");
}
.cat_num span[data-letter="9"] {
background-image: url("https://topshelfrecords.co/redesign/svg/9_scanner_text-01.svg");
}
.cat_num span[data-letter="t"]:before {
content: "T";
}
.cat_num span[data-letter="s"]:before {
content: "S";
}
.cat_num span[data-letter="r"]:before {
content: "R";
}
.cat_num span[data-letter="c"]:before {
content: "C";
}
.cat_num span[data-letter="-"]:before {
content: "-";
}
.cat_num span[data-letter="0"]:before {
content: "0";
}
.cat_num span[data-letter="1"]:before {
content: "1";
}
.cat_num span[data-letter="2"]:before {
content: "2";
}
.cat_num span[data-letter="3"]:before {
content: "3";
}
.cat_num span[data-letter="4"]:before {
content: "4";
}
.cat_num span[data-letter="5"]:before {
content: "5";
}
.cat_num span[data-letter="6"]:before {
content: "6";
}
.cat_num span[data-letter="7"]:before {
content: "7";
}
.cat_num span[data-letter="8"]:before {
content: "8";
}
.cat_num span[data-letter="9"]:before {
content: "9";
}
@media (min-width: 768px) {
.carousel-cell {
width: 250px;
}
.carousel-cell img {
height: 250px;
max-height: 250px;
}
.category-carousel .carousel-cell img,
.roster-item-carousel .carousel-cell img {
width: 250px;
max-width: 250px;
height: 250px;
max-height: 250px;
min-height: auto;
}
.rslides .carousel-cell,
.rslides .carousel-cell img {
height: 100%;
width: 100%;
max-height: 100%;
}
}
@media (min-width: 31.5em) {
.main_nav li,
.socials li {
margin: auto 2px;
}
.grid,
.module {
grid-gap: 20px;
grid-gap: var(--twenty);
}
.grid.full {
padding: 20px;
padding: var(--twenty);
}
.text_layout .grid.full.padded {
padding: 20px;
padding: var(--twenty);
}
.grid.ten_squares {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"a b c"
"section_title section_title d"
"e f g"
"h i j";
}
.grid.ten_squares.r {
grid-template-areas:
"a b c"
"d section_title section_title"
"e f g"
"h i j";
}
.text_layout .full.module.topshelf_header {
margin-top: 100px;
margin-top: var(--onehundred);
}
.news .lol_top {
line-height: 0.5em;
font-size: .6em;
}
.topshelf_header .info {
margin-bottom: 360px;
}
.guest_artwork_bg_wrap .bg.shape_three {
bottom: -360px;
}
.catalog_item .zsquare_four.bg {
top: 116px;
}
.news header {
grid-column: 1/4;
grid-row: 1/1;
}
.news .footer {
grid-column: 1/4;
grid-row: 1/3;
}
.news section.home_news {
grid-column: 1/4;
grid-row: 1/3;
position: relative;
margin: 0;
}
.home section.secondary_callout {
grid-column: 1/2;
}
.news .module {
overflow: visible;
}
.listen ul li {
display: inline;
}
.listen ul li:first-of-type::before {
content: none;
}
.carousel .section_title {
margin: 0 0 -16px var(--twenty);
}
.carousel-cell a {
margin: 0 20px;
}
footer .grid .footer_nav {
grid-column: 1/5;
grid-row: 1/3;
align-self: start;
}
footer .grid .footer_misc {
grid-column: 5/9;
grid-row: 1/3;
}
footer .grid .footer_socials {
grid-column: 9/13;
grid-row: 1/3;
}
footer .grid .footer_legal {
grid-column: 1/13;
grid-row: 4/4;
line-height: 26px;
}
footer .grid li {
display: block;
font-size: 78%;
}
}
@media (min-width: 40em) {
.js .mobile_menu {
display: none;
}
.js .main_nav li,
.js .socials li {
display: inline;
}
.js .main_nav li.active.mobile,
.no-js .main_nav li.active.mobile {
display: none;
}
.topshelf_header .info {
margin-bottom: 400px;
}
.guest_artwork_bg_wrap {
bottom: -80px;
}
.guest_artwork_bg {
bottom: -244px;
height: 600px;
}
.guest_artwork_bg_wrap .bg.shape_three {
bottom: -480px;
height: 167vw;
}
.news {
grid-template-columns: repeat(4, 1fr);
overflow: visible;
}
.news header {
grid-column: 1/3;
grid-row: 1/1;
}
.news .footer {
grid-column: 1/3;
grid-row: 1/3;
}
.news section.home_news {
grid-column: 1/3;
grid-row: 1/3;
}
.text_layout.news .secondary_callout .text_block.grid .info {
margin: 0 0 10px;
z-index: 2;
}
.text_layout.news .home_news .text_block.grid .info,
.text_layout.news .text_block.grid .info {
margin: -80px 0px 0 -20px;
}
.news aside {
grid-column: 3/5;
grid-row: 1/3;
}
.news .bg {
grid-row: 1/3;
grid-column: 1/1;
width: 40px;
height: 100%;
position: relative;
left: -80px;
clip-path: initial;
top: 0;
}
.news .carousel .bg {
width: 100%;
left: 0;
}
.news .featured_vinyl .bg {
left: 0;
}
.featured_vinyl .formats {
grid-column: 8/12;
}
.news .box .bg {
width: 100%;
position: absolute;
left: 0;
}
.roster .roster_select,
.tour .roster_select,
.news .roster_select {
grid-column: 1/10;
}
.zsquare {
height: auto;
}
.zsquare .contours {
top: -50%;
left: -50%;
margin: -50%;
width: 100%;
height: 120vw;
position: relative;
}
.zsquare .contours image {
height: 200%;
}
.zsquare .cat_num {
font-size: 60px;
}
.catalog_item .zsquare_one.bg {
top: -113px;
}
footer .grid li {
margin: 10px 0 10px;
}
}
@media (min-width: 55em) {
body {
font-size: 140%;
}
.headroom {
margin: 0 0 15px;
padding: 40px 40px 100px;
padding: var(--forty) var(--forty) 100px;
}
.news_post .headroom {
margin: 0;
}
.catalog .headroom,
.roster .headroom,
.tour .headroom {
margin: 0;
padding-bottom: 0;
}
h1.logo {
width: auto;
}
.logo img,
.logo svg {
height: 70px;
width: 48px;
}
.subnav {
grid-row: 3/4;
font-size: 80%;
}
.roster .subnav,
.news .subnav,
.tour .subnav {
grid-column: 1/7;
text-align: right;
padding: 10px 0 0 40px;
grid-row: 4/5;
}
button.checkout {
width: auto;
}
button.checkout .cart {
height: 40px;
width: 40px;
}
button.checkout .load {
height: 30px;
width: 30px;
}
.roster_select {
grid-column: 1/5;
}
.catalog header select {
-webkit-animation-name: slide;
-ms-animation-name: slide;
-ms-animation-duration: 1000ms;
-webkit-animation-duration: 1000ms;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
}
@-webkit-keyframes slide {
0% {-webkit-transform: translateX(-20px);}
100% {-webkit-transform: translateX(0px);}
}
@-ms-keyframes slide {
0% {-ms-transform: translateX(-20px);}
100% {-ms-transform: translateX(0px);}
}
@keyframes slide {
0% {transform: translateX(-20px);}
100% {transform: translateX(0px);}
}
.catalog .roster_select,
.roster .roster_select,
.news .roster_select,
.tour .roster_select {
grid-column: 6/11;
grid-row: 2/2;
height: 60px;
align-self: center;
margin: 10px 0 0 0;
}
.roster .roster_select,
.news .roster_select,
.tour .roster_select {
grid-column: 2/7;
grid-row: 3/3;
margin: 70px 0 0 0;
}
.news .roster_select {
align-self: end;
}
.words_art {
display: block;
grid-column: 1/8;
margin-left: -40px;
}
.catalog .year {
grid-column: 7/10;
grid-row: 3/3;
height: 60px;
align-self: center;
margin-top: 10px;
}
.catalog .format {
grid-column: 4/7;
grid-row: 4/4;
height: 60px;
align-self: center;
margin-top: 10px;
}
.category {
grid-column: 5/9;
grid-row: 2/2;
}
.genre {
grid-column: 9/13;
grid-row: 2/2;
}
.catalog .genre {
grid-column: 2/5;
grid-row: 5/5;
height: 60px;
align-self: center;
margin-top: 10px;
}
.catalog header .text_feature {
grid-row: 5/7;
grid-column: 7/12;
color: #fff;
}
.roster .text_feature,
.news .text_feature,
.tour .text_feature {
grid-row: 3/6;
grid-column: 7/13;
color: #222;
border: 20px solid #435cea;
padding: 40px;
margin: 10px 40px 0 0;
}
.news .text_feature {
border: 20px solid #f4504a;
}
.border_box.grid.full {
padding: 40px;
padding: var(--forty);
}
.border_box .album {
max-width: 33vw;
width: 33vw;
margin: auto;
grid-row: 2/4;
grid-column: 2/3;
}
.border_box .info {
grid-row: 2/4;
grid-column: 3/4;
margin: auto auto 30px;
}
.border_box .border {
margin: -40px;
border-top: 50vh solid rgba(67, 92, 234, .9);
border-bottom: 50vh solid rgba(67, 92, 234, .9);
border-left: 50vw solid rgba(9, 245, 186, .9);
border-right: 50vw solid rgba(9, 245, 186, .9);
}
.catalog header h2,
.roster header h2,
.tour header h2,
.news_post header h2 {
display: inline;
}
.blob,
.news .overflow_fix .blob {
overflow: visible;
grid-row: 1/7;
grid-column: 1/9;
position: relative;
z-index: -200;
display: block;
}
.catalog .overflow_fix .blob .bg,
.roster .overflow_fix .blob .bg,
.tour .overflow_fix .blob .bg {
display: inline;
-webkit-clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
clip-path: polygon(36% 3%, 29% 4%, 21% 6%, 16% 9%, 10% 14%, 7% 20%, 4% 25%, 4% 32%, 6% 40%, 12% 45%, 21% 48%, 31% 48%, 38% 46%, 44% 42%, 46% 35%, 47% 27%, 49% 22%, 53% 17%, 56% 13%, 55% 9%, 51% 5%, 46% 2%);
position: absolute;
z-index: -10;
}
.tour .overflow_fix .blob .bg {
-webkit-clip-path: var(--shape_four);
clip-path: var(--shape_four);
transform: rotate(179deg);
top: 26px;
width: 75vw;
height: 50vw;
left: -30px;
}
.catalog .blob .bg {
-webkit-clip-path: var(--shape_four);
clip-path: var(--shape_four);
transform: rotate(187deg);
top: 56px;
width: 75vw;
height: 50vw;
left: -190px;
display: block;
}
.news .overflow_fix .blob .bg {
-webkit-clip-path: var(--shape_eight);
clip-path: var(--shape_eight);
transform: rotate(-68deg);
top: 0;
width: 75vw;
height: 50vw;
left: -144px;
}
.roster .overflow_fix .blob .bg {
-webkit-clip-path: var(--shape_six);
clip-path: var(--shape_six);
transform: rotate(-68deg);
top: -63px;
width: 75vw;
height: 50vw;
left: -144px;
}
.catalog .bg:before {
background: #bb400e;
opacity: .9;
}
.news .overflow_fix .blob .bg:before {
background: #67a7aa;
opacity: .9;
}
.roster .bg:before {
background: #8cd9af;
opacity: .8;
}
.tour .bg:before {
background: #626f99;
opacity: .9;
}
.steps {
display: block;
background: #435cea;
height: 120px;
width: 125%;
max-width: 125%;
position: relative;
z-index: -1;
margin-bottom: -20px;
}
.roster .steps,
.news .steps,
.tour .steps {
margin: 0;
background: transparent;
border-top: 20px solid #435cea;
width: 100%;
max-width: 100%;
}
.news .steps {
border-top: 20px solid #f4504a;
}
.step_base {
grid-row: 6/10;
grid-column: 1/13;
height: 100%;
margin-bottom: 0;
margin-left: -16%;
}
.step_one {
grid-row: 5/5;
grid-column: 4/13;
}
.step_two {
grid-row: 4/4;
grid-column: 6/13;
}
.step_three {
grid-row: 3/3;
grid-column: 8/13;
}
.news .step_three {
display: block;
}
.roster .step_three,
.news .step_three,
.tour .step_three {
grid-row: 3/6;
grid-column: 7/13;
transform: rotate(-230deg);
transform-origin: top right;
margin: 24px -40px 0;
}
.step_four {
grid-row: 2/2;
grid-column: 10/13;
}
.news .step_four {
display: block;
}
.roster .step_four,
.news .step_four,
.tour .step_four {
grid-row: 3/6;
grid-column: 7/13;
transform: rotate(-50deg);
width: 200%;
transform-origin: 10px 5px;
}
.text_layout .contain .outline.full.module {
margin: 40px 40px 120px;
}
.video_callout_text {
font-size: 1.4em;
grid-column: 3/11;
align-self: center;
margin: 0;
}
.home.text_layout .grid.outline_callout {
grid-template-rows: repeat(3, auto);
padding: 40px;
}
.outline_callout .callout {
grid-column: 7/13;
grid-row: 2/4;
font-size: 100%;
}
.outline_callout .album {
grid-column: 1/7;
grid-row: 1/3;
}
.outline_callout .formats {
grid-column: 1/7;
grid-row: 3/4;
text-align: left;
}
.home .outline_callout header {
grid-column: 7/13;
grid-row: 1/2;
}
.grid.ten_squares {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"a b c d"
"section_title section_title e f"
"g h i j";
}
.grid.ten_squares.r {
grid-template-areas:
"a b c d"
"e f section_title section_title"
"g h i j";
}
.grid.ten_squares,
.catalog .grid.ten_squares,
.catalog_item .grid.ten_squares {
grid-gap: 20px;
grid-gap: var(--twenty);
}
.grid.ten_squares .box img {
transition: transform 0.4s;
}
.no-touch .grid.ten_squares .box:hover img,
.grid.ten_squares .box.cs-hover img {
transform: translateY(-50px);
}
.grid.ten_squares .title_text {
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
transform: translateY(100%);
transition: transform 0.4s, opacity 0.3s;
}
.no-touch .grid.ten_squares .box:hover .title_text,
.grid.ten_squares .box.cs-hover .title_text {
opacity: 1;
transform: translateY(0px);
transition: transform 0.4s, opacity 0.1s;
}
.news.text_layout .full.module.topshelf_header {
margin-top: -76px;
}
.news .lol_top {
line-height: 0.7em;
font-size: .7em;
}
.news.home .lol_top {
padding: 0 0 40px;
}
.topshelf_header .info {
margin-bottom: 560px;
}
.guest_artwork_bg {
width: 104vw;
bottom: -620px;
left: -74px;
height: 1200px;
}
.shop_art {
margin-bottom: -135px;
margin-top: -25px;
}
.headroom,
.headerbg .headroom {
padding: 40px;
padding: var(--forty);
}
.grid,
.module {
margin: 40px;
margin: var(--forty);
grid-gap: 40px;
grid-gap: var(--forty);
}
.shop .grid,
.shop .module {
grid-gap: 20px;
grid-gap: var(--twenty);
}
.text_layout .grid.full,
.grid.full {
padding: 40px;
padding: var(--forty);
}
.text_layout .grid.full.padded {
padding: 40px;
padding: var(--forty);
}
.text_layout .footer .grid.full {
margin: 0;
padding-bottom: 20px;
padding-top: 20px;
}
.text_layout.product .footer .grid.full,
.text_layout.catalog_item .footer .grid.full,
.text_layout.roster_item .footer .grid.full,
.text_layout.tour .footer .grid.full,
.text_layout .footer .grid.full {
padding: 20px 40px 40px;
padding: var(--twenty) var(--forty) var(--forty);
}
.news.text_layout .contain > .text_block {
margin-bottom: 80px;
margin-bottom: var(--eighty);
margin-top: 80px;
margin-top: var(--eighty);
}
.news.text_layout .contain > .text_block:last-child {
margin-bottom: 40px;
margin-bottom: var(--forty);
}
.text_layout.news .secondary_callout {
display: grid;
/*grid-template-rows: 1fr 1fr;*/
grid-template-columns: 1fr;
width: calc(100% - 80px);
width: calc(100% - var(--eighty));
}
.carousel-cell .carousel-title {
margin: 0 0 0 40px;
margin: 0 0 0 var(--forty);
}
.carousel .section_title {
margin: 0 0 -18px 40px;
margin: 0 0 -18px var(--forty);
}
.carousel-cell a {
margin: 0 40px;
margin: 0 var(--forty);
}
.carousel.roster-item-slider .section_title {
padding: 20px 0 20px 20px;
padding: var(--twenty) 0 var(--twenty) var(--twenty);
}
.featured_artist_text {
line-height: 29px;
}
.featured_artist_text::after {
content: 'A blend of minimal phrased piano and dynamic drumming. The pursuit of a live experience composed of visual and audio ...';
}
.grid.ten_squares .box {
overflow: hidden;
}
.news_post .flickity-viewport {
overflow-x: visible;
}
.news_post .carousel-cell-image {
max-height: 80vh;
min-height: 40vh;
height: 100%;
}
.text_block {
margin: 80px 40px;
margin: var(--eighty) var(--forty);
}
.text_block:last-child {
margin: 80px 40px 40px;
margin: var(--eighty) var(--forty) var(--forty);
}
.text_block.grid {
grid-template-columns: repeat(4, 1fr);
}
.text_block > :last-child {
margin-bottom: 0;
}
.text_layout .module {
margin: 40px;
margin: var(--forty);
}
.text_layout .text_block.grid {
grid-template-columns: repeat(6, 1fr);
/*grid-template-rows: auto auto 1fr;*/
grid-template-rows: auto auto;
grid-template-areas:
"rslides rslides info info info info"
"tracklist tracklist info info info info"
"tracklist tracklist listen listen listen listen"
"tracklist tracklist rec rec rec rec"
"boxed_text . rec rec rec rec";
margin: 40px;
margin: var(--forty);
margin-top: -45px;
overflow: visible;
}
.text_layout.roster_item .text_block.grid {
grid-template-areas:
"title title title title title title"
"rslides rslides listen listen listen listen"
"pcredit pcredit info info info info"
"members members info info info info"
"news_posts news_posts info info info info"
"catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles"
"tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates"
"social_urls social_urls press press press press"
"boxed_text . rec rec rec rec";
}
.text_layout.product .text_block.grid {
grid-template-areas:
"title title title title title title"
"rslides rslides purchase purchase purchase purchase"
"rslides rslides info info info info"
". . info info info info"
"tracklist tracklist info info info info"
"tracklist tracklist info info info info"
"tracklist tracklist pressing_info pressing_info pressing_info pressing_info"
"tracklist tracklist listen listen listen listen"
"tracklist tracklist rec rec rec rec"
"boxed_text . rec rec rec rec";
}
.text_layout.news .text_block.grid {
grid-template-areas:
"title title title title title title"
"rslides rslides info info info info"
". . info info info info";
}
.text_layout.news .home_news .text_block.grid {
grid-column: span 2;
grid-template-areas:
". . title title title title"
". rslides rslides rslides rslides ."
". . info info info ."
}
.home.text_layout.news .secondary_callout .text_block.grid {
grid-template-areas:
". . title title title title title title title title title title"
"rslides rslides info info info info info info info info info formats";
width: 100%;
grid-column: 1/1;
margin: 0;
grid-row: 1/1;
grid-template-columns: repeat(12, 1fr);
}
.home.text_layout.news .secondary_callout .text_block.grid:nth-child(2) {
grid-row: 2/3;
margin: 0;
grid-template-areas:
"title title title title title title title title title title . ."
"formats info info info info info info info info info rslides rslides"
}
.text_layout.news .secondary_callout .text_block.grid:last-child {
grid-row: 3/3;
}
.news.text_layout .secondary_callout .news_item section.formats {
grid-area: formats-start;
text-align: left;
align-self: start;
}
.text_layout.news .secondary_callout .text_block.grid.news_item .photo {
width: calc(100% + 60px);
max-width: calc(100% + 60px);
margin-top: -60px;
}
.text_layout.news .secondary_callout .text_block.grid:nth-child(2) .photo {
grid-column: 11/13;
margin-left: -60px;
box-shadow: -20px 20px 0px 0px #de6043;
}
.text_layout.news .secondary_callout .text_block.grid:nth-child(2) .title {
text-align: right;
grid-area: title;
}
.text_layout.news .secondary_callout .text_block.grid:nth-child(2) .formats {
text-align: right;
grid-area: formats;
align-self: start;
}
.news .secondary_callout .text_block.grid:nth-child(2) .bg {
grid-column: 10/12;
top: -12vw;
width: 36vw;
left: -7vw;
height: 50vw;
}
.news.home .news_item .bg.shape_nine {
width: 60vw;
left: -16vw;
}
.news .news_item .bg {
display: none;
}
.news.home .news_item .bg {
display: block;
}
.text_layout.news_post .text_block.grid {
margin-top: -20px;
grid-template-columns: repeat(12, 1fr);
grid-template-areas:
"title title title title title title title . . . . ."
"info info info info info info info . news_posts news_posts news_posts news_posts"
"info info info info info info info . news_items news_items news_items news_items";
}
.text_layout.news_post .news_posts {
position: -webkit-sticky;
position: sticky;
top: 40px;
z-index: 1;
}
.text_layout.news_post .module.news {
grid-area: news_items;
}
[data-tooltip]:before {
width: calc(100vw - 80px);
}
.text_layout.tour .text_block.grid {
grid-template-areas:
"rslides rslides tour_dates tour_dates tour_dates tour_dates"
". . tour_dates tour_dates tour_dates tour_dates"
". . social_urls social_urls info info";
}
.text_layout.news .text_block.grid .title {
margin: -13px 0;
position: relative;
}
.text_layout.news .text_block.feature .title {
margin: -36px 0 0 0;
}
.text_layout.news .home_news .text_block.grid .title {
margin: 0 10px -40px -120px;
}
.text_layout.news .home_news .text_block.grid .info {
margin: -40px 10px 0 -120px;
z-index: 3;
}
.news.text_layout .news_item.feature {
background-color: #fff;
}
.text_layout.news .text_block.grid .info {
margin: 0 0 10px;
}
.text_layout.news .news_item.feature .info {
margin: 0 0 40px -20px;
}
.news .home_top {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
}
.news.text_layout section.home_top {
margin-top: -60px;
margin-bottom: -60px;
}
.news .news_item .bg.shape_one {
width: 50vw;
left: 40px;
}
.news .news_item .bg.shape_two {
width: 90vw;
left: 40px;
height: 51vw;
}
.news .news_item .bg.shape_three {
width: 50vw;
left: 40px;
}
.news .secondary_callout .bg.shape_three {
height: 50vw;
}
.secondary_callout .news_item.text_block span,
.secondary_callout .news_item.text_block p {
display: block;
}
.news_item .photo small {
display: inline-block;
}
.pubdate {
display: inline-block;
}
.news .pubdate {
background: #fff;
padding: 0 2px;
line-height: normal;
}
.news .secondary_callout .pubdate {
padding: 4px;
color: #000;
font-size: 60%;
}
.news .secondary_callout .callout p:last-child {
margin-bottom: 0;
}
.full.module.featured_post {
margin: 80px -40px 0;
}
.featured_post h2 {
line-height: 41px;
}
.featured_post .quote {
grid-column: 7/12;
}
.featured_post img {
margin: 120px 0 120px auto;
}
.text_layout.tour .text_block.grid .title {
margin-top: 20px;
position: absolute;
top: 100%;
}
.category_item .text_block .title,
.artist_products .text_block .title {
margin: -115px 0 30px;
}
.catalog .text_block .title {
margin: -98px 0 20px;
}
.text_block h2 {
margin-bottom: 10px;
}
.text_block h2 i:before {
content: ' - ';
}
.text_block h2 i {
display: inline;
}
.catalog_item .product_shots {
}
.tour .photo {
top: 40px;
}
.tour .photo img,
.tour .photo .pcredit {
display: block;
}
.red_line {
background-color: #f4504a;
display: block;
}
.text_block span,
.text_block p {
line-height: 42px;
}
.featured_grid h2 {
font-size: 3em;
margin: 60px 0 0 -15px;
}
.featured_grid h3 {
font-size: 2em;
}
.featured_grid .blurb {
display: block;
}
.featured_grid img.artist {
grid-row: 1/11;
}
.roster-item-slider .section_title h2::before,
.roster-item-slider .section_title h3::before {
content: "discover: ";
}
.featured_vinyl .artist {
grid-column: 6/12;
grid-row: 1/6;
}
.featured_vinyl header, .news .featured_vinyl header {
grid-column: 1/9;
margin: 40px auto auto 40px;
}
.featured_vinyl h2 {
font-size: 2.5vw;
}
.featured_vinyl h3 {
font-size: 2vw;
}
.featured_vinyl .formats {
grid-column: 11/11;
}
.featured_vinyl aside {
grid-row: 2/3;
margin: 20px 20px -20px -40px;
font-size: 3vw;
}
.featured_vinyl .album {
max-height: 300px;
max-width: 300px;
grid-row: 6/7;
grid-column: 2/5;
}
.featured_vinyl img.vinyl {
grid-row: 6/7;
max-height: 300px;
max-width: 300px;
}
.featured_vinyl img.vinyl.one {
grid-column: 4/7;
}
.featured_vinyl img.vinyl.two {
grid-column: 6/9;
}
.featured_vinyl img.vinyl.three {
grid-column: 8/11;
}
footer .grid .footer_nav {
grid-column: 1/4;
}
footer .grid .footer_misc {
grid-column: 4/7;
}
footer .grid .footer_socials {
grid-column: 7/10;
}
footer .grid .footer_legal {
grid-column: 1/13;
line-height: 20px;
}
footer .grid li {
display: block;
}
.zsquare .cat_num {
font-size: 80px;
}
.catalog_item .zsquare_one.bg {
top: -107px;
width: 61vw;
height: 50vw;
right: 0;
max-width: 61vw;
}
.zsquare_two {
grid-column: 2/ span 10;
grid-row: 2 / span 10;
}
.zsquare_three {
grid-column: 3/ span 8;
grid-row: 3/ span 8;
}
.zsquare_five {
grid-row: 4 / span 6;
grid-column: 4 / span 6;
}
.zsquare_six {
display: block;
}
.catalog_item .zsquare_seven.bg {
bottom: -13px;
width: 50vw;
height: 50vw;
right: 23%;
max-width: 50vw;
}
.information .span_one {
grid-column: span 1;
}
.information .span_two {
grid-column: span 2;
}
.information .span_three {
grid-column: span 3;
}
.information .span_four {
grid-column: span 4;
}
.information .span_six {
grid-column: span 6;
}
.information .span_eight {
grid-column: span 8;
}
.information .span_nine {
grid-column: span 9;
}
.information .span_ten {
grid-column: span 10;
}
.information .span_full {
grid-column: 1/13;
}
}
@media (min-width: 70em) {
.headerbg .headroom {
padding: 40px 40px 150px;
padding: var(--forty) var(--forty) 150px;
}
.text_layout .text_block.grid {
grid-gap: 40px;
grid-gap: var(--forty);
}
.text_layout .module {
margin: 40px;
margin: var(--forty);
}
.main_nav li,
.socials li {
font-size: 100%;
}
.main_nav {
grid-column: 2/8;
}
.socials {
display: block;
grid-column: 8/12;
text-align: right;
}
.home .socials,
.roster .socials,
.roster_item .socials,
.news .socials,
.news_post .socials,
.information .socials,
.tour .socials,
.catalog .socials,
.catalog_item .socials,
.order .socials {
display: none;
}
.catalog .socials,
.roster .socials,
.tour .socials {
grid-row: 1/1;
}
.category {
grid-column: 4/7;
}
.roster_select {
grid-column: 1/4;
}
.genre {
grid-column: 7/10;
}
.search-wrap {
grid-column: 10/10;
grid-row: 2/2;
text-align: left;
}
.home .search-wrap,
.roster .search-wrap,
.roster_item .search-wrap,
.news .search-wrap,
.news_post .search-wrap,
.information .search-wrap,
.tour .search-wrap,
.catalog .search-wrap,
.catalog_item .search-wrap,
.order .search-wrap{
text-align: right;
grid-column: 11/11;
grid-row: 1/1;
}
.headroom .text_block select,
.text_block .purchase select {
width: 50%;
max-width: 50%;
margin-bottom: 0;
}
.button {
width: inherit;;
max-width: inherit;
}
.text_feature {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"section q1 q2 q3";
}
.shop .text_feature span::after {
content: '';
display: none;
}
.catalog_item .zsquare_one.bg {
top: -186px;
}
.catalog .steps {
height: 140px;
margin-bottom: -100px;
}
.catalog .step_base {
height: 100%;
}
.carousel-cell {
width: 300px;
}
.category-carousel .carousel-cell img,
.roster-item-carousel .carousel-cell img {
width: 300px;
max-width: 300px;
height: 300px;
max-height: 300px;
min-height: auto;
}
.news .lol_top {
line-height: 0.7em;
font-size: .8em;
}
.news.home .lol_top {
padding: 60px 0 0;
}
.lol_top p {
text-align: center;
width: calc(100vw - 100px);
font-size: 1vw;
margin: 0;
}
.topshelf_header .info {
grid-column: 3/11;
margin-bottom: 640px;
}
.topshelf_header .info header {
column-span: all;
margin-bottom: 20px;
margin-bottom: var(--twenty);
}
.topshelf_header .info p:first-of-type {
margin-top: 0;
}
.news section.home_news {
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
}
.newsnav .box.back,
.newsnav .box.next {
font-size: 150%;
overflow: visible;
display: block;
align-self: center;
align-content: center;
height: 100%;
list-style: none;
content: none;
}
.text_layout.news .grid.home_news .text_block.grid {
width: auto;
margin: 80px 40px 0;
}
.text_layout.news .home_news .text_block.grid .title {
margin: 0 10px -20px -80px;
}
.text_layout.news .home_news .text_block.grid .photo {
margin-top: -40px;
}
.text_layout.news .home_news .text_block.grid .info {
margin: -93px 0 10px -80px;
}
.news .news_item .bg.shape_two {
width: 70vw;
left: 20px;
height: 34vw;
}
.video_callout_text a::after {
content: '';
white-space: normal;
}
}
@media (min-width: 80em) {
.home .socials,
.roster .socials,
.roster_item .socials,
.news .socials,
.news_post .socials,
.information .socials,
.tour .socials,
.catalog .socials,
.catalog_item .socials,
.order .socials {
display: block;
grid-column: 7/11;
text-align: right;
grid-row: 1/1;
}
.grid.ten_squares {
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
"section_title section_title a b c d"
"e f g h i j";
}
.grid.ten_squares.r {
grid-template-areas:
"section_title section_title a b c d"
"e f g h i j";
}
.text_feature {
grid-template-columns: 2fr repeat(3, 1fr);
}
.roster .roster_select,
.news .roster_select,
.tour .roster_select {
grid-column: 3/7;
}
.featured_artist_text::after {
content: 'A blend of minimal phrased piano and dynamic drumming. The pursuit of a live experience composed of visual and audio expression. Formed in 2006, with elements of jazz, funk, post‐rock and electronic music, mouse on the keys fits into a genre of their own.';
}
footer .grid .footer_nav {
grid-column: 1/3;
}
footer .grid .footer_misc {
grid-column: 3/5;
}
footer .grid .footer_socials {
grid-column: 5/7;
}
.zsquare .cat_num {
font-size: 100px;
}
.catalog_item .zsquare_one.bg {
top: -198px;
}
.guest_artwork_bg {
width: 112vw;
bottom: -820px;
left: -130px;
height: 1424px;
}
.guest_artwork_bg_wrap .bg.shape_three {
left: -31vw;
height: 137vw;
}
.text_layout.news .news_item.feature .info {
margin: 0 0 40px 100px;
}
.outline_callout .formats {
grid-column: 7/13;
grid-row: 3/4;
}
.outline_callout .album {
grid-row: 1/4;
}
.outline_callout .callout {
grid-row: 2/3;
}
}
/* ~105em is standard max-width of most modern laptop viewports */
@media (min-width: 92em) {
.catalog_item .zsquare_one.bg {
top: -257px;
}
body {
font-size: 150%;
}
.news .lol_top {
line-height: .9em;
font-size: 1.15em;
}
.lol_top p {
font-size: 1.3vw;
}
.featured_vinyl.grid {
grid-template-rows: 0vw 6vw 5vw 5vw 0vw 8vw 0vw;
margin-top: 120px;
position: relative;
}
.featured_vinyl header, .news .featured_vinyl header {
margin: -40px auto auto 40px;
}
.featured_vinyl .formats {
margin: auto 0 0 0;
align-self: end;
}
.featured_vinyl .artist {
grid-column: 1/13;
grid-row: 1/7;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.featured_vinyl .vinyl,
.featured_vinyl .album {
margin: -20px auto auto auto;
}
.featured_vinyl .album {
grid-row: 6/8;
grid-column: 2/6;
}
.featured_vinyl img.vinyl.one {
grid-column: 4/8;
}
.featured_vinyl img.vinyl.two {
grid-column: 6/10;
}
.featured_vinyl img.vinyl.three {
grid-column: 8/12;
}
.text_layout .module.featured_vinyl + .text_block {
margin-top: -60px;
padding-top: 40px;
}
.featured_vinyl aside.l, .featured_vinyl aside.r {
grid-row: 3/8;
font-size: 6vw;
}
.featured_vinyl aside.r {
margin: 6.5vw 0 0 -20px;
}
.featured_vinyl aside.l {
display: block;
margin: 11vw 0 0 -6vw;
z-index: 3;
}
.news .featured_vinyl .bg {
left: -40px;
top: -120px;
height: calc(100% + 100px);
overflow: hidden;
z-index: 1;
clip-path: inherit;
width: calc(100vw + 80px);
position: absolute;
grid-column: unset;
grid-row: unset;
}
.text_layout.news .secondary_callout {
grid-template-columns: 1fr;
margin-top: 40px;
}
.news.text_layout .secondary_callout .news_item section.formats {
grid-row: formats-start;
grid-column: formats-start;
text-align: left;
}
.text_layout.news .secondary_callout .text_block.grid.news_item .photo {
margin-top: -80px;
}
.news .secondary_callout .news_item section {
grid-column: 1/3;
}
.news .secondary_callout .news_item .bg {
width: 80vw;
height: 320%;
}
.news .secondary_callout .bg.shape_three {
height: 180%;
width: 50vw;
left: -200px;
}
.text_block.grid {
grid-template-columns: repeat(4, 1fr);
}
.text_layout .text_block.grid {
grid-template-columns: repeat(12, 1fr);
grid-template-areas:
"rslides rslides rslides info info info info info info tracklist tracklist tracklist"
"listen listen listen info info info info info info tracklist tracklist tracklist"
"listen listen listen rec rec rec rec rec rec tracklist tracklist tracklist"
"listen listen listen rec rec rec rec rec rec . . ."
"listen listen listen rec rec rec rec rec rec . boxed_text boxed_text";
margin-top: -50px;
}
.text_layout.product .text_block.grid {
grid-template-areas:
"title title title title title title title title title title title title"
"rslides rslides rslides purchase purchase purchase purchase purchase purchase tracklist tracklist tracklist"
"rslides rslides rslides info info info info info info tracklist tracklist tracklist"
"listen listen listen info info info info info info tracklist tracklist tracklist"
"listen listen listen info info info info info info tracklist tracklist tracklist"
"listen listen listen pressing_info pressing_info pressing_info pressing_info pressing_info pressing_info tracklist tracklist tracklist"
"listen listen listen rec rec rec rec rec rec tracklist tracklist tracklist"
"listen listen listen rec rec rec rec rec rec . . ."
"listen listen listen rec rec rec rec rec rec . boxed_text boxed_text";
}
.text_layout.roster_item .text_block.grid {
grid-template-areas:
"rslides rslides rslides title title title title title title title title title"
"rslides rslides rslides info info info info info info listen listen listen"
"pcredit pcredit pcredit info info info info info info listen listen listen"
"pcredit pcredit pcredit info info info info info info boxed_text boxed_text boxed_text"
". . . info info info info info info boxed_text boxed_text boxed_text"
"members members members press press press press press press . . ."
"social_urls social_urls social_urls press press press press press press . . ."
"catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles catalog_titles"
"tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates"
"tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates"
"news_posts news_posts news_posts news_posts news_posts news_posts news_posts news_posts news_posts . . ."
"rec rec rec rec rec rec rec rec rec . . ."
"rec rec rec rec rec rec rec rec rec . . ."
"rec rec rec rec rec rec rec rec rec . . .";
}
.text_layout.tour .text_block.grid {
grid-template-areas:
"rslides rslides rslides tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates"
"title title title tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates tour_dates"
"title title title info info info info info info social_urls social_urls social_urls"
". . . info info info info info info social_urls social_urls social_urls";
}
.text_layout.news .grid.home_news {
margin-top: -60px;
padding-top: 40px;
}
.text_layout.news .text_block.grid {
grid-template-areas:
"title title title title title title title title title title title title"
"rslides rslides rslides info info info info info info info info info"
". . . info info info info info info info info info"
". . . info info info info info info info info info";
}
.home.text_layout.news .text_block.grid {
grid-template-areas: "title title title title title title"
"rslides rslides info info info info"
". . info info info info";
grid-template-columns: repeat(6, 1fr);
width: calc(50vw - 80px);
margin: 60px 40px 0;
}
.home.text_layout.news .secondary_callout .text_block.grid {
margin: 80px 0 0;
width: calc(100vw - 80px);
}
.news .news_wrapper {
grid-template-columns: auto auto;
grid-auto-flow: dense;
}
/*GET TO KNOW*/
/*GET TO KNOW*/
/*GET TO KNOW*/
.text_layout.news .news_wrapper .grid.gettoknow {
grid-template-areas: unset;
grid-row: unset;
grid-template-rows: auto;
}
.text_layout.news .text_block.grid.feature.gettoknow header.grid {
width: calc(50vw + 60px);
margin: 20px -60px 20px 0;
grid-column: 5/13;
grid-row: 1/2;
}
.text_layout.news .news_item.feature.gettoknow .photo {
left: 0;
right: 0;
width: calc(100% + 20px);
grid-column: 3/13;
top: -20px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.text_layout.news .news_item.feature.gettoknow .info {
margin: auto;
grid-column: 1/5;
grid-row: 1/2;
width: 100%;
}
/*END GET TO kNOW*/
/*END GET TO kNOW*/
/*END GET TO kNOW*/
.newsnav .box.back,
.newsnav .box.next {
font-size: 190%;
overflow: visible;
display: block;
align-self: center;
align-content: center;
height: 100%;
list-style: none;
content: none;
}
.text_layout.news .news_wrapper .pagination span {
font-size: 200%;
}
.text_layout.news .news_wrapper .news_item.feature,
.text_layout.news .news_wrapper .featured_post {
width: calc(100vw - 60px);
}
.text_layout.news .news_wrapper .news_item {
width: calc(50vw - 40px);
grid-column: span 1;
padding-right: 20px;
}
.text_layout.news .news_wrapper .news_item.feature {
padding-right: 40px;
grid-column: 1/3;
}
.text_layout.news .news_wrapper .featured_post {
width: 100vw;
grid-column: 1/3;
}
.words_art {
grid-row: 5/7;
}
.text_layout.news_post .text_block.grid img {
width: auto;
}
.text_layout.news .grid.home_news article:first-child {
margin-top: 60px;
}
.text_layout.news .grid.home_news .text_block.grid .info {
margin: 0 0 10px -20px;
}
.text_layout.news .home_news .text_block.grid .title {
margin: -13px 10px -21px 0;
}
.text_layout.news .home_news .text_block.grid .photo {
margin: 0;
}
.home.news .home_news .bg {
display: none;
}
.news_post .info img,
.news_post .info .img {
max-width: 300px;
float: left;
margin: 0 20px 20px 0;
}
.news_post .info .img small {
float: left;
}
.text_layout .text_block.grid .tracklist {
margin-top: 75px;
}
.text_layout.product .text_block.grid .tracklist {
margin-top: 0;
}
.boxed_text {
align-self: start;
}
.boxed_text span {
display: inline-block;
}
.listen ul li {
display: block;
white-space: normal;
}
.listen ul li:first-of-type::before {
content: "• ";
}
.featured_grid img.artist {
grid-row: 1/11;
}
.carousel {
margin-top: 60px;
}
.carousel-cell a {
margin: 10px 40px 0;
margin: 10px var(--forty) 0;
}
.carousel-cell .carousel-title {
margin: 0 0 0 40px;
margin: 0 0 0 var(--forty);
}
.carousel.roster-item-slider .section_title {
padding: 40px 0 20px 20px;
padding: var(--forty) 0 20px var(--twenty);
}
.featured_artist_text::after {
content: 'A blend of minimal phrased piano and dynamic drumming. The pursuit of a live experience composed of visual and audio expression. Formed in 2006, with elements of jazz, funk, post‐rock and electronic music, mouse on the keys fits into a genre of their own.';
}
.catalog_item .zsquare_one.bg {
top: -198px;
}
.catalog .steps {
height: 210px;
margin-bottom: -130px;
}
.catalog .step_base {
height: 100%;
}
}
@media (min-width: 105em) {
.guest_artwork_bg_wrap {
bottom: 0;
}
.guest_artwork_bg {
width: 111vw;
bottom: -1220px;
left: -130px;
height: 1824px;
}
.guest_artwork_bg_wrap .bg.shape_three {
bottom: -340px;
height: 127vw;
}
}
@media (min-width: 125em) {
.news.text_layout .full.module.topshelf_header {
grid-template-rows: auto repeat(2, 1fr);
}
.topshelf_header .info {
column-width: 14em;
column-gap: 2em;
column-rule: 1px solid #ccc;
grid-column: 2/12;
column-count: 4;
margin-bottom: 800px;
}
.news .bg {
grid-column: 1/3;
width: 150%;
}
.guest_artwork_bg {
bottom: -1640px;
height: 2224px;
}
.guest_artwork_bg_wrap .bg.shape_three {
height: 120vw;
}
}
.bg {
background-image: url("https://topshelfrecords.co/redesign/files/1543055710.svg");
background-repeat: repeat;
height: 100%;
width: 100%;
position: relative;
-webkit-filter: contrast(100%) brightness(140%) saturate(200%);
filter: contrast(100%) brightness(140%) saturate(200%);
opacity: 0.75;
z-index: -1;
background-blend-mode: overlay;
}
.bg.alt {
background-image: url("https://topshelfrecords.co/redesign/files/1526472333.svg");
}
.bg.alt_one {
background-image: url("https://topshelfrecords.co/redesign/files/Squiggles--Arvin61r58.svg");
}
.bg.alt_two {
background-image: url("https://topshelfrecords.co/redesign/files/Psychedelic-Zebra-Pattern--Arvin61r58.svg");
}
.bg.alt_three {
background-image: url("https://topshelfrecords.co/redesign/files/Squiggles2--Arvin61r58.svg");
}
.bg.alt_four {
background-image: url("https://topshelfrecords.co/redesign/files/5477700029_66b177cd44_b-01.svg");
}
.bg.alt_five {
background-image: url("https://topshelfrecords.co/redesign/files/5477700029_66b177cd44_b.svg");
}
.bg.alt_six {
background-image: url("https://topshelfrecords.co/redesign/files/security-envelope-template-verizon+blobs+small-01.svg");
}
.bg.alt_seven {
background-image: url("https://topshelfrecords.co/redesign/files/security-envelope-template-scan0053-01.svg");
}
.bg.alt_eight {
background-image: url("https://topshelfrecords.co/redesign/files/security-envelope-template-cindy-bernard-security-envelope-merrill-lynch-1-1987.svg");
}
.bg.alt_nine {
background-image: url("https://topshelfrecords.co/redesign/files/security-envelope-template-5477699571-1aa67762bb-b-01.svg");
}
.bg.alt_ten {
background-image: url("https://topshelfrecords.co/redesign/files/large_13e32413af7c8ad54726162a4ceacd43.svg");
}
.bg::before {
content: "";
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
opacity: 0.5;
background: #de6f43;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides.carousel img {
height: auto;
float: left;
width: 100%;
border: 0;
max-width: 100%;
max-height: 100%;
}
.flickity-page-dots {
position: relative;
z-index: 2;
text-align: center;
width: 100%;
margin-top: -40px;
}
.flickity-page-dots:before {
margin-bottom: 40px;
}
.flickity-page-dots li {
display: inline;
padding: 0 20px 0 0;
}
.flickity-page-dots li:last-of-type {
padding-right: 0;
}
.flickity-page-dots li a {
background: transparent;
padding: 0px 5px;
border-radius: 38px;
color: transparent;
border: #f0f54f solid 2px;
}
.flickity-page-dots li a:hover {
background: #f5e209;
border: #f5e209 solid 2px;
}
.flickity-page-dots li.dot a {
background: rgba(67, 92, 234, 1);
border: rgba(67, 92, 234, 1) solid 2px;
}
* {
}