:root { --main-color: #f7bb00; --text-color: #2b2b2b; --black: #000000; --white: #ffffff; }

.post-title { font-size: 2.2rem; margin-bottom: 1rem; font-weight: 700; }

p, h3 { margin-bottom: 1rem; }

* { padding: 0px; margin: 0px; box-sizing: border-box; }

html, body { margin: 0; padding: 0; font-family: futura-pt, sans-serif; background-color: var(--black); color: var(--white); min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }

.fixed { position: fixed; width: 100%; }

.page-content { position: relative; padding: 2rem 2rem 0 2rem; }

@media only screen and (min-width: 768px) { .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 50vw 1fr; } }

@media only screen and (min-width: 768px) { .shop-inner .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 1fr; } }

.post { width: 100%; }

@media only screen and (min-width: 768px) { .post { width: calc(100% - 4rem); grid-column: 2/-1; max-width: 50vw; margin: 0; } }

/* Mailchimp overides */
#mc_embed_signup form { padding: 0 !important; margin-top: 1rem; }

#mc_embed_signup .button { background-color: var(--main-color) !important; }

.signup { margin: 3rem 0 3rem 0; }

@media only screen and (min-width: 768px) { .signup { margin: 0 0 3rem 0; grid-column: 1/2; max-width: 50%; } }

a { transition: all .75s ease; text-decoration: none; color: var(--white); }

.btn-reverse { color: var(--main-color); font-weight: bold; }

a:hover { color: var(--main-color); }

.btn-reverse:hover { color: var(--white); }

.add-cart, .listen { border: solid 1px white; color: white; padding: 5px 20px; background-color: #000000; transition: all .75s ease; font-size: 1rem; text-transform: uppercase; cursor: pointer; }

.sold { border: solid 1px white; color: white; padding: 5px 20px; background-color: #000000; font-size: 1rem; text-transform: uppercase; margin-right: 10px; }

.add-cart { margin: 0 10px 15px 0; }

.add-cart:hover, .listen:hover { background-color: var(--main-color); }

.listen { margin-right: 1rem; margin-bottom: 1rem; }

button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.select-dd { display: inline-block; font-size: 1rem; text-transform: uppercase; color: #ffffff; padding: 5px 20px; box-sizing: border-box; border-radius: 0; margin: 0 10px 15px 0; border: 1px solid #fff; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #000; cursor: pointer; }

.select-dd::-ms-expand { display: none; }

.select-dd:hover { border-color: #ffffff; background: var(--main-color); transition: all .75s ease; }

.select-dd:focus { border-color: #ffffff; color: #ffffff; outline: none; }

.select-dd option { font-weight: normal; }

.track-list .listen { padding: 0; background: none; border: 0; display: inline-block; width: 15px; height: 20px; cursor: pointer; margin-left: 10px; margin-bottom: 0; vertical-align: middle; }

.no-bullet { list-style: none; margin-left: -25px; padding-left: 0; }

.background { display: grid; grid-template-columns: 50vw 1fr; grid-template-rows: 1fr 1fr; background: url(images/speedywunder-1.png); background-size: cover; width: 100%; height: 100%; position: absolute; overflow: hidden; position: fixed; }

.shop .background { background: url(images/speedywunder-2.png); }

.compilations .background { background: url(images/speedywunder-3.png); }

.eps .background { background: url(images/speedywunder-4.png); }

.merch .background { background: url(images/speedywunder-5.png); }

.singles .background { background: url(images/speedywunder-6.png); }

.about .background { background: url(images/speedywunder-7.png); }

@media only screen and (max-width: 768px) { .background { grid-template-columns: 1fr; } }

.background .triangle { background: url(images/triangle.svg); background-size: cover; mix-blend-mode: soft-light; background-repeat: no-repeat; grid-column: 1/2; grid-row: 1/-1; background-position: top right; }

.background .t-line { background: url(images/line.svg); background-size: cover; grid-column: 1/2; grid-row: 1/-1; background-repeat: no-repeat; background-position: top right; }

@media only screen and (max-width: 768px) { .background .t-line { opacity: .5; } }

.background .black { grid-column: 2/-1; grid-row: 1/-1; background: rgba(0, 0, 0, 0); }

.line { width: 100vh; height: calc(100vh * 1.5); background-color: #f7bb00; transform: rotate(45deg); position: absolute; mix-blend-mode: soft-light; left: 0; top: 0; transform-origin: top right; transform-style: preserve-3D; opacity: 0; }

.white-line { width: 100vh; height: calc(100vh * 1.5); border-right: solid 1px white; transform: rotate(45deg); position: absolute; left: 0; top: 0; transform-origin: top right; transform-style: preserve-3D; }

.site-header { padding: 2rem 2rem 0 2rem; display: flex; flex-direction: row; justify-content: space-between; position: relative; }

.site-title { text-transform: uppercase; font-weight: 500; font-size: 2rem; letter-spacing: 1px; }

@media only screen and (max-width: 768px) { .site-title { width: 70%; font-size: 1.5rem; } }

.hline { display: none; height: 1px; width: 100%; background-color: white; }

@media only screen and (min-width: 768px) { .hline { display: block; } }

#news { width: 100%; }

@media only screen and (min-width: 768px) { #news { width: calc(100% - 5rem); grid-column: 1; max-width: 30vw; margin: 0; } }

#news h3 { text-align: left; border-bottom: solid 1px; padding-bottom: 9px; font-style: italic; font-weight: 100; text-transform: uppercase; font-size: 1rem; margin-bottom: 1rem; }

#news h4 { text-align: left; padding-top: 1rem; font-weight: 100; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 1rem; }

nav { display: none; transition: background-color .5s ease; }

@media only screen and (min-width: 768px) { nav { display: block; } }

.mobile-menu-on { display: block; position: absolute; width: 100%; height: 100vh; overflow-y: hidden; background-color: var(--main-color); display: flex; justify-content: center; align-content: center; z-index: 10; top: 0; left: 0; }

nav ul { margin: 0; padding: 0; text-transform: uppercase; list-style: none; display: flex; flex-direction: column; justify-content: center; align-content: center; }

@media only screen and (min-width: 768px) { nav ul { display: flex; flex-direction: row; justify-content: space-between; align-content: flex-end; flex-wrap: wrap; } }

nav li { display: flex; align-items: center; padding: 5px 10px; margin-bottom: 10px; }

@media only screen and (max-width: 768px) { nav li { text-align: center; font-size: 2rem; background-color: var(--text-color); } }

nav li:last-of-type { padding-right: 0; }

nav li.active { border-top: solid 1px; color: var(--main-color); }

nav li.active a { color: var(--main-color); }

.hamburger { padding: 15px 10px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; z-index: 10; position: absolute; right: 30px; top: 20px; }

@media only screen and (min-width: 768px) { .hamburger { display: none; } }

.hamburger:hover { opacity: 0.7; }

.hamburger:focus { outline: none; border: dashed 2px var(--white); }

.hamburger.is-active:hover { opacity: 0.7; }

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: var(--white); z-index: 10; }

.hamburger-box { width: 42px; height: 42px; display: inline-block; position: relative; background-color: black; }

.hamburger-inner { display: block; top: 50%; margin-top: -2px; }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: var(--white); border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }

.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }

.hamburger-inner::before { top: -10px; }

.hamburger-inner::after { bottom: -10px; }

/* Spring Effect */
.hamburger--spring .hamburger-inner { top: 10px; transition: background-color 0s 0.13s linear; }

.hamburger--spring .hamburger-inner::before { top: 10px; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring .hamburger-inner::after { top: 20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; }

.hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(45deg); }

.hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 10px, 0) rotate(-45deg); }

#my-cart .snipcart-checkout { padding: 5px 10px; display: flex; align-items: center; }

@media only screen and (min-width: 768px) { #my-cart .snipcart-checkout { background-color: var(--main-color); color: var(--black); } }

#my-cart .snipcart-checkout img { width: 30px; padding-right: 5px; height: auto; }

.shop-inner .triangle, .shop-inner .t-line { display: none; }

.compilations h3, .singles h3, .merch h3 { font-size: 2.5rem; }

.compilations .product-info h4, .singles .product-info h4, .merch .product-info h4 { font-size: 1.75rem; margin-bottom: 1rem; text-transform: uppercase; }

.compilations .product-info ul, .singles .product-info ul, .merch .product-info ul { margin-left: 2rem; margin-bottom: 1rem; }

.comp-list { margin: 0 0 3rem 0; padding: 0; list-style: none; display: grid; grid-gap: 2rem; grid-row-gap: 4rem; grid-template-columns: 1fr 1fr; }

@media only screen and (max-width: 768px) { .comp-list { grid-template-columns: 1fr; } }

.comp-list .product-info { display: grid; grid-template-columns: minmax(150px, 300px) 2fr; grid-gap: 2rem; }

@media only screen and (max-width: 600px) { .comp-list .product-info { grid-template-columns: 1fr; } }

.single-list { margin: 0 0 3rem 0; padding: 0; list-style: none; display: grid; grid-gap: 2rem; grid-row-gap: 4rem; grid-template-columns: 1fr 1fr 1fr; }

@media only screen and (max-width: 768px) { .single-list { grid-template-columns: 1fr 1fr; } }

@media only screen and (max-width: 500px) { .single-list { grid-template-columns: 1fr; } }

.single-list .product-info { display: flex; flex-direction: column; justify-content: space-between; align-content: space-between; align-items: flex-start; }

.album-list { margin: 0 0 3rem 0; padding: 0; list-style: none; display: grid; grid-gap: 2rem; grid-row-gap: 4rem; grid-template-columns: 1fr 1fr; }

@media only screen and (max-width: 768px) { .album-list { grid-template-columns: 1fr 1fr; } }

@media only screen and (max-width: 500px) { .album-list { grid-template-columns: 1fr; } }

.album-list .track-list { margin-left: 2rem; }

.album-list .product-info { display: flex; flex-direction: column; justify-content: space-between; align-content: space-between; align-items: flex-start; }

.boxheader { grid-column: 1 / -1; }

.image-grid { display: flex; align-items: flex-end; gap: 0 1rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 2rem; scroll-snap-type: x mandatory; grid-column: 1 / -1; }

.image-grid img { max-width: 400px; }

@media only screen and (max-width: 768px) { .image-grid img { max-width: 300px; } }

.boxset { margin: 0 0 3rem 0; padding: 0; list-style: none; display: grid; grid-gap: 2rem; grid-row-gap: 4rem; grid-template-columns: 1fr 1fr; }

@media only screen and (max-width: 768px) { .boxset { grid-template-columns: 1fr 1fr; } }

@media only screen and (max-width: 500px) { .boxset { grid-template-columns: 1fr; } }

.boxset h4, .boxset hr { margin-bottom: 1rem; }

.merch-list { margin: 0; padding: 0; list-style: none; display: grid; grid-gap: 2rem; grid-row-gap: 4rem; grid-template-columns: 1fr 1fr; }

@media only screen and (max-width: 600px) { .merch-list { grid-template-columns: 1fr; } }

.merch-list .product { display: grid; grid-template-columns: minmax(150px, 300px) 2fr; grid-gap: 2rem; }

.merch-list .product img { max-width: 100%; }

@media only screen and (max-width: 600px) { .merch-list .product { grid-template-columns: 1fr; } }

.merch-list h3 { font-size: 3rem; }

.merch-list h4 { font-size: 1.75rem; margin-bottom: 1rem; text-transform: uppercase; }

.shop-home { display: grid; grid-gap: 10px; grid-template-columns: 40vw 1fr; grid-template-rows: 100px 1fr 1fr; min-height: 50vh; }

.shop-nav { margin-bottom: 2rem; }

.shop-cats { z-index: 2; transition: all 0.75s ease; grid-column: 1; list-style: none; font-size: calc(20px + 4vw); line-height: calc(20px + 4vw); font-weight: 700; text-transform: uppercase; }

@media only screen and (max-width: 768px) { .shop-cats .shop-cats-item { margin-bottom: 2rem; } }

@media only screen and (min-width: 768px) { .shop-cats { grid-column: 2; text-align: right; transform-origin: top left; transform-style: preserve-3D; } }

.single-list + hr { margin: 4rem 0; }

iframe + ul { display: none; }

#releases { width: 100%; }

@media only screen and (min-width: 768px) { #releases { width: calc(100% - 5rem); grid-column: 2/-1; max-width: 50vw; margin: 0; } }

#releases h3 { text-align: right; border-bottom: solid 1px; padding-bottom: 9px; font-style: italic; font-weight: 100; text-transform: uppercase; font-size: 1rem; margin-bottom: 1rem; }

#releases ul { margin: 0 0 10px 0; padding: 0 0 1rem 0; list-style: none; }

@media only screen and (min-width: 768px) { #releases ul { z-index: 10; } }

#releases li { display: flex; flex-direction: row; align-content: flex-start; }

.product-info img { max-width: 100%; margin: 0 auto 1rem auto; }

.product-info h4 { margin-bottom: 20px; text-transform: uppercase; font-size: 2.25rem; }

@media only screen and (max-width: 768px) { .product-info h4 { font-size: 1.75rem; line-height: 26px; } }

.slide-buttons { padding: 0rem 0 2rem 0; display: flex; justify-content: flex-end; }

.prev-arrow { transition: all .75s ease; width: 0; height: 0; border-left: 0 solid transparent; border-right: 15px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; cursor: pointer; }

.prev-arrow:hover { border-right: 15px solid #f7bb00; }

.next-arrow { transition: all .75s ease; margin-left: 30px; width: 0; height: 0; border-right: 0 solid transparent; border-left: 15px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; cursor: pointer; }

.next-arrow:hover { border-left: 15px solid var(--main-color); }

.track-list { margin-bottom: 10px; }

.all-tracks { height: 65px; margin-bottom: 15px; margin-top: 10px; overflow: auto; }

.all-tracks li { cursor: pointer; }

.all-tracks li:hover { color: var(--main-color); }

.all-tracks::-webkit-scrollbar { width: 10px; background-color: #464646; }

.all-tracks::-webkit-scrollbar-thumb { border-radius: 10px; background-color: var(--main-color); }

.gradient { height: 190px; border: 1px solid white; background: black; /* Old browsers */ }

.container { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; -ms-transition: all .7s ease; transition: all .7s ease; position: fixed; transform: translateY(100px); width: 327px; height: 70px; bottom: 0; right: 0; padding: 10px; opacity: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

.js-show-player { bottom: 0; z-index: 10; opacity: 100; position: fixed; transform: translateY(0px); }

.controls { display: flex; flex-direction: row; justify-content: flex-end; }

.player { position: absolute; width: 200px; bottom: 10px; width: 95%; padding: 5px 10px 5px 10px; display: flex; flex-direction: column; }

.player-button { display: inline-block; width: 25px; height: 25px; background-image: url(../assets/images/sprite.svg); background-repeat: no-repeat; cursor: pointer; margin-left: 10px; background-size: 175px 25px; }

#play { background-position: -50px -1px; }

#pause { background-position: -76px -1px; }

#mute { background-position: -50px -1px; }

#muted { background-position: -50px -1px; }

input[type="range"] { width: 285px; /* margin-top: -5px; */ margin: 5px; }

#close { float: right; background-position: -99px -1px; display: none; }

.js-hidden { display: none; }

input[type=range] { -webkit-appearance: none; margin: 18px 0; width: 100%; }

input[type=range]:focus { outline: none; }

input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: var(--main-color); border-radius: 1.3px; border: 0.2px solid #010101; }

input[type=range]::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -4px; }

input[type=range]:focus::-webkit-slider-runnable-track { background: var(--main-color); }

input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: var(--main-color); border-radius: 1.3px; border: 0.2px solid #010101; }

input[type=range]::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; }

input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; }

input[type=range]::-ms-fill-lower { background: var(--main-color); border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; }

input[type=range]::-ms-fill-upper { background: var(--main-color); border: 0.2px solid #010101; border-radius: 2.6px; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; }

input[type=range]::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 16px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; }

input[type=range]:focus::-ms-fill-lower { background: var(--main-color); }

input[type=range]:focus::-ms-fill-upper { background: var(--main-color); }

footer { padding: 2rem; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: relative; z-index: 0; }

@media only screen and (max-width: 768px) { footer { flex-direction: column; align-items: flex-start; } }

footer #socials { display: flex; flex-direction: column; margin-right: 1rem; text-align: left; }

footer .blm { max-width: 50%; text-align: center; }

@media only screen and (max-width: 768px) { footer .blm { max-width: 100%; margin: 1rem 0 1rem 0; text-align: left; } }

footer img { max-width: 100px; }

/*# sourceMappingURL=main.css.map */