body {margin: 0; background: #FFF; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

:root {--gutter: 20px;}
.app {padding: var(--gutter) 0; display: grid; grid-gap: var(--gutter) 0; grid-template-columns: var(--gutter) 1fr var(--gutter); align-content: start;}
.app > * {grid-column: 2 / -2;}
.app > .full {grid-column: 1 / -1;}
.hs {display: grid; grid-gap: calc(var(--gutter) / 2); grid-template-columns: 10px; grid-template-rows: minmax(150px, 1fr); grid-auto-flow: column; grid-auto-columns: calc(50% - var(--gutter) * 2); overflow-x: scroll; scroll-snap-type: x proximity; padding-bottom: calc(.75 * var(--gutter)); margin-bottom: calc(-.25 * var(--gutter));}
.hs:before, .hs:after {content: ''; width: 10px;}

/* Demo styles */
html, body {height: 100%;}
ul {list-style: none; padding: 0;}
h1, h2, h3 {margin: 0;}
.app {width: 100%; height: 100%; overflow-y: scroll;}
.hs > li,
.item {scroll-snap-align: center; padding: calc(var(--gutter) / 2 * 1.5); display: flex; flex-direction: column; justify-content: center; align-items: center; background: #fff; border-radius: 8px;}
.no-scrollbar {scrollbar-width: none; margin-bottom: 0; padding-bottom: 0;}
.no-scrollbar::-webkit-scrollbar {display: none;}

p {font-family: 'Montserrat', sans-serif; font-weight: 400; text-transform: normal;}

h1 {font-size: 11vw; font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: normal; line-height: 0.9; text-decoration: none; hyphens: none; z-index: 10;}
h2 {font-size: 4vw; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: normal; line-height: 1.0; text-decoration: underline; hyphens: none; z-index: 10;}
h3 {font-size: 4vw; font-weight: 900; line-height: 0.625; font-family: 'Montserrat', sans-serif; text-transform: normal; margin: 0; color: #4B4D52; hyphens: none;}

.text-head-info {font-size: 2.5vw; font-weight: 700; line-height: 0.625;}
.text {font-size: 3.5vw; line-height: 1.25;}
.text-link {font-size: 2vw; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80%; height: 35%; margin: auto;}
.text-button {font-size: 1.75vw; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}
.text-headline {font-size: 8vw; font-weight: 900; line-height: 1.0;}
.text-footer {font-size: 2vw; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; position: absolute; width: 90%; line-height: 5vw;}
.text-footer-alt {font-size: 2vw; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; position: absolute; width: 100%; line-height: 2.5vw;}

.hover-fx {transition: 0.2s 0.2s; -webkit-transition: 0.2s 0.2s; -moz-transition: 0.2s 0.2s; -o-transition: 0.2s 0.2s;}
	.hover-fx:active {transform: scale(0.95); -webkit-user-select: none; -webkit-touch-callout: none;}

.fading {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.black {color: #4B4D52;}
.black-alt {color: #4B4D52;}
.white {color: #FFF;}
.white-alt {color: #FFF;}
.gray {color: #DCDCDC;}
.darkgray {color: #AAA;}
.darkgray-alt {color: #AAA;}
.yelllow {color: #FFDA75;}
.red {color: #EE4B3E;}
.green {color: #33CC96}
.bg-black {background: #4B4D52;}
.bg-dark {background: #000;}
.bg-white {background: #FFF;}
.bg-gray {background: #DCDCDC;}
.bg-gray-alt {background: #DCDCDC;}
.bg-lightgray {background: #EFEFEF;}
.bg-rosa {background: #F5DDE9;}
.bg-blue {background: #E4F2FA;}
.bg-yellow {background: #FFDA75;}
.bg-red {background: #EE4B3E;}
.bg-green {background: #33CC96}

.bg-button-gray {background: #DCDCDC; border: 0.125vw solid #DCDCDC;}
.bg-button-white {background: #FFF; border: 0.125vw solid #FFF;}
.bg-button-red {background: #EE4B3E; border: 0.125vw solid #EE4B3E;}
.bg-button-red-alt {background: transparent; border: 0.5vw solid #EE4B3E;}
.bg-button-green {background: #33CC96; border: 0.5vw solid #33CC96;}

.button-up {width: 100%; height: 8vw; background: transparent; opacity: 1; position: fixed; top: 0;}

.border-black {border: 1vw solid #4B4D52;}
.border-black-bottom {border-bottom: 1px solid #DCDCDC;}
.border-black-top {border-top: 1px solid #EFEFEF;}
.border-dark-top {border-top: 1px solid #AAA;}
.border-dark-bottom {border-bottom: 1px solid #AAA;}
.border-gray-alt {border-bottom: 1px solid #EFEFEF;}

.color-button {border: 1vw solid #FFF; color: #FFF;}

.avatar {width: 8vw; height: 8vw;}

.corners-full {webkit-border-radius: 50%; -moz-border-radius: 50%;; -khtml-border-radius: 50%;; border-radius: 50%;; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;}
.corners-small {webkit-border-radius: 3vw; -moz-border-radius: 3vw;; -khtml-border-radius: 3vw;; border-radius: 3vw;; border-top-left-radius: 3vw; border-top-right-radius: 3vw; border-bottom-left-radius: 3vw; border-bottom-right-radius: 3vw;}
.corners-small-top {border-top-left-radius: 3vw; border-top-right-radius: 3vw;}
.corners-small-left {border-top-left-radius: 3vw; border-bottom-left-radius: 3vw;}
.corners-xsmall {webkit-border-radius: 1vw; -moz-border-radius: 1vw;; -khtml-border-radius: 1vw;; border-radius: 1vw;; border-top-left-radius: 1vw; border-top-right-radius: 1vw; border-bottom-left-radius: 1vw; border-bottom-right-radius: 1vw;}

.button {width: 22vw; height: 7vw; position: relative;}
.button-link {width: 17vw; height: 17vw; position: relative; text-align: center;}
.button-social-white {width: 7vw; height: 7vw; position: relative; text-align: center; background: #FFF; border: 0.125vw solid #FFF;}
.button-social-yellow {width: 7vw; height: 7vw; position: relative; text-align: center; background: #FFDA75; border: 0.125vw solid #FFDA75;}
.button-social-gray {width: 7vw; height: 7vw; position: relative; text-align: center; background: #DCDCDC; border: 0.125vw solid #DCDCDC;}
.button-submit {width: 90%; height: 8vw; font-size: 2.25vw; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;}

.typo-link {font-size: 9vw; line-height: 2.5vw; margin: 0 0 0 0.75vw;}
.typo-social {font-size: 3vw; line-height: 2.5vw;}
.typo-social-big {font-size: 5vw; line-height: 10vw;}

.container-post {width: 90%; left: 0; right: 0; margin: auto; clear: both; padding-bottom: 8vw;}
.container-more {width: 100%; height: 125vw; left: 0; right: 0; margin: auto;}
.container-artists {width: 100%; left: 0; right: 0; margin: auto;}
.container-playlist {width: 100%; left: 0; right: 0; margin: auto;}
	.container-playlist-inner {width: 90%; height: 15vw; left: 0; right: 0; margin: auto; padding: 5vw 0vw 5vw 0vw;}
.container-footer {width: 90%; height: 9vw; left: 0; right: 0; margin: auto; border-bottom: 1px solid #DCDCDC;}
.container-footer-big {width: 90%; height: 20vw; left: 0; right: 0; margin: auto; position: relative;}

.box {width: 65vw; height: 82vw; display: inline-block; *dsplay: inline;/* For IE7*/ *zoom:1;/* For IE7*/ white-space: normal;}
	.box-inner-square {height: 0; padding-bottom: 100%; width: 100%; position: relative;}
		.box-inner-square-typo {position: absolute; bottom: 0; margin: 0vw 0vw 5vw 5vw;}
	.margin-box {margin-top: 30vw; margin-left: 5%;}
	.margin-box-alt {margin-top: 30vw; margin-left: 5%; margin-right: 5%;}
.box-small {height: 0; padding-bottom: 17%; width: 17%; position: relative; text-align: center;}
.box-small-alt {height: 0; padding-bottom: 17%; width: 10%; position: relative; text-align: center;}
.box-long {height: 0; padding-bottom: 17%; width: 73%; position: relative;}
.box-xsmall {font-size: 1.5vw; font-weight: 900; line-height: 0.625; padding: 0.75vw 2vw 0.75vw 2vw; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;}
.box-input {width: 100%; height: 9vw; text-align: center;}
.box-field {width: 100%; height: 36vw; text-align: center;}
.box-button {width: 49%; height: 9vw; text-align: center;}
.box-spacer {width: 100%; height: 2vw;}
.box-spacer-alt {width: 2vw; height: 9vw;}

.gap {margin-top: 10vw;}
.gap-alt {margin-top: 12.5vw;}

.image {width: 100%; height: 60vw;}

.form-input {background: #DCDCDC; width: 90%; height: 8.5vw; resize: none; font-size: 2.5vw; font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: normal; color: #4B4D52; border: 0.25vw solid #DCDCDC;}
.form-input:focus {color: #4B4D52; outline-color: transparent; outline-style: none;}
.form-text {background: #DCDCDC; width: 90%; height: 32.5vw; resize: none; font-size: 2.5vw; font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: normal; color: #4B4D52; border: 0.25vw solid #DCDCDC;}
.form-text:focus {color: #4B4D52; outline-color: transparent; outline-style: none;}

#show {visibility: visible;}
#hide {visibility: hidden;}
#hide-alt {display: none;}

textarea, input[type=text] {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; outline: none;}

input::-webkit-input-placeholder {color: #FFF;}
input:-moz-placeholder {color: #FFF; opacity: 1;}
input::-moz-placeholder {color: #FFF; opacity: 1;}
input:-ms-input-placeholder {color: #FFF;}
textarea.form-text::-webkit-input-placeholder {color: #FFF;}
textarea.form-text:-moz-placeholder {color: #FFF; opacity: 1;}
textarea.form-text::-moz-placeholder {color: #FFF; opacity: 1;}
textarea.form-text:-ms-input-placeholder {color: #FFF;}