@import url('https://fonts.googleapis.com/css?family=VT323');

@font-face {
	font-family:'PaloSantoSite2018';
	src:url(palosanto.woff);
}

/* normalize */
audio, canvas, video {display:inline-block;} audio:not([controls]) {display:none; height:0;} [hidden], template {display:none;} html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} a:focus {outline:0;} a:active, a:hover, input {outline:0;} abbr[title] {border-bottom: 1px dotted;} 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;} 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 {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; /* 1 */ padding:0; /* 2 */} input[type='search'] {-webkit-appearance:textfield; /* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box; /* 2 */ 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;}

/* reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} ul, ol {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}

/* base */
::selection {color:#2B2929; background-color:#BDE60E;}
::-moz-selection {color:#2B2929; background-color:#BDE60E;}

body {overflow-x:hidden; color:#fff; font:500 1em/1em 'VT323', monospace; text-align:center; background:#2B2929;}

html {-webkit-text-size-adjust:none;}
* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

img.full {display:block; width:100%;}

a {color:#5d7790; text-decoration:none;}

.clear {clear:both;}

#content {position:relative; z-index:100; padding:3em 5em; background:#2B2929;}

/* styles */
h2, h5 {font-weight:normal; text-transform:uppercase; letter-spacing:.1em;}

h2 {font-size:170%; line-height:120%;}
h5 {font-size:170%; line-height:100%;}

h5.line {margin-bottom:1em;}
h5.line span {position:relative; display:block;}
h5.line span:after {content:''; position:absolute; left:0; bottom:-.5em; width:20%; height:.25em; background:#BDE60E;}

h5.line.line-red span:after {background:#972B1A;}


p {font-size:110%; line-height:160%;}

p+p {margin-top:1em;}

.cta-button,
.nav-button a
{cursor:pointer; display:inline-block; padding:.9em 1em; border:2px solid transparent; color:#fff; font-size:100%; line-height:100%; letter-spacing:.1em; text-transform:uppercase; background:#BDE60E;}

.cta-margin {margin-top:2em;}

.nav-button {text-transform:uppercase;}
.nav-button li {display:inline-block; margin:0 .15em;}
.nav-button a {display:block;}
.nav-button .button-title {margin-right:1em;}

.cta-spotify,
.cta-spotify:hover
{color:#fff; background:#3aE70B !important;}

.cta-button i,
.nav-button a i
{display:inline-block; vertical-align:1px; transform:scale(1.1);}
.icon-float-right i {margin-left:.75em; transform-origin:center left;}
.icon-float-left i {margin-right:.75em; transform-origin:center right;}

.cta-line,
.footer .nav-button a
{border-color:#BDE60E; color:#BDE60E; background:none;}

.cta-button:hover,
.cta-line:hover,
.nav-button a:hover
{border-color:transparent; color:#fff; background:#3aE70B;}

.cta-dark,
.cta-dark:hover
{border-color:transparent; color:#fff; background:#972B1a;}

.cta-small,
.nav-button li 
{font-size:70%; line-height:100%;}

.border-style {box-shadow:10px 10px 0 #972B1a;}

.color-yellow {color:#BDE60E;}

/* intro */
.header, .intro {position:relative; z-index:100;}

.header {padding-bottom:1em;}

.header-share {float:left;}
.header-button {float:right;}

.intro-logo {margin:4em auto 3em auto;}
.intro-logo img {width:60%; margin:0 auto 1em auto;}

.float-left,
.float-right
{float:left; width:50%;}

.float-right {border-left:2em solid transparent;}

.embed-video {overflow:hidden; position:relative; height:0; padding:0 0 56.25% 0 !important;}
.embed-video iframe,
.embed-video object,
.embed-video embed
{position:absolute; top:0; left:0; width:100%; height:100%;}

/* video bg */
.intro-video,
.intro-video:after,
.show-video-mobile
{position:absolute; top:0; left:0;}

.intro-video:after,
.show-video-mobile
{right:0; bottom:0;}

.intro-video {position:absolute; overflow:hidden; z-index:90; width:100vw; height:100vh;}
.intro-video:after {content:''; 
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(43,41,41,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(43,41,41,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(43,41,41,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#2B2929',GradientType=0);}

.show-video-mobile {display:none;}

.placeholder-image {position:absolute; top:50%; left:50%; width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:cover; transform:translate(-50%,-50%);}

/* app */
.app-box {position:relative; margin:4em -5em; padding:5em; background:#972B1a; overflow:hidden;}

.image-intro {float:left; width:40%; border-right:2em solid transparent; text-align:left;}
.image-final {float:right; position:relative; width:60%; padding-bottom:60%;}

.image-intro p {font-size:100%;}

.image-hold {position:absolute; top:0; right:0; bottom:0; left:0; background:#2B2929;}
.headline {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
display:block; width:90%; font:350%/120% 'PaloSantoSite2018'; text-align:center; word-wrap:break-word;}

.image-editor {position:absolute; bottom:5.1em; right:62%; left:0; padding-left:5em;}
.image-editor p.small {margin:.5em 0 1.5em 0; font-size:80%; text-transform:lowercase;}

textarea {display:block; width:100%; height:4em; padding:1em; color:#fff; border:2px solid #fff; font-size:100%; background:transparent; resize:none;}

textarea::-webkit-input-placeholder {color:#fff;}
textarea::-moz-placeholder {color:#fff;}

textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}

/* side */
.playlist-box,
.newsletter-box
{float:left;}

.playlist-box {width:40%;}
.newsletter-box {width:60%; border-left:2em solid transparent;}

.playlist-box iframe {display:block; width:100%; height:400px; margin-bottom:1em;}

.newsletter-box {position:relative; padding:2em;}
.newsletter-box:after {content:''; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0; background:#BDE60E; box-shadow:10px 10px 0 #972B1a;}

.newsletter-box,
.newsletter-box a
{color:#fff;}

.newsletter-box p {margin:1em 0 2em 0;}

/* footer */
.footer {margin-top:6em;}

.footer, .footer a {color:#fff;}

.footer-follow {margin-bottom:2em;}

.footer img {width:0 auto; height:3em;}
.footer p {margin-top:1em; font-size:70%; font-family:'VT323', monospace; line-height:100%; text-transform:uppercase;}
.footer p a {color:#BDE60E;}

.footer br {display:none;}

@media only screen
and (min-device-width:300px)
and (max-device-width:760px)
	{			
		#content {padding:1em;}
		
		/* styles */
		p {line-height:130%;}
		
		h2, h5 {font-size:130%;}
		h5.line span:after {left:50%; transform:translateX(-50%);}
		
		.cta-button {font-size:80%;}
				
		.cta-small {font-size:65%; line-height:100%;}
		
		.nav-button li {display:block; margin:0; font-size:80%;}
		.nav-button li+li {margin-top:.5em;}
		.nav-button .button-title {margin-right:0;}

		/* intro */
		.header-share {display:none;}
		.header-button {float:none; display:block;}
		
		.intro-logo {margin:2em auto;}
		.intro-logo img {width:90%; margin:0 auto .5em auto;}
		.intro-logo span {display:block;}
		
		.float-left,
		.float-right
		{float:none; width:100%; border:0;}

		.float-right {margin-top:2em;}
		
		/* video bg */
		.show-video {display:none;}
		.show-video-mobile {display:block; z-index:80;}
		
		/* app */
		.app-box {width:auto; margin:2em -1em; padding:2em 1em;}
		
		.image-intro,
		.image-final
		{float:none; width:100%;}
		.image-intro {border:0; text-align:center;}
		.image-final {margin:1em 0; padding-bottom:100%;}
		
		.headline {font-size:200%;}
		
		.image-editor {position:static; padding-left:0;}
		
		/* side */
		.playlist-box,
		.newsletter-box
		{float:none; width:100%; border-width:0;}

		.playlist-box {margin-bottom:2em;}
		.playlist-box iframe {height:80px;}
		
		.newsletter-box {transform:translate(0);}

		/* footer */
		.footer {margin-top:2em;}

		.footer p {font-size:70%; line-height:140%;}

		.footer br {display:block;}
		.footer .dash {display:none;}
	
	}

/* cookie bar */
.cookies-bar {position:fixed; z-index:999; right:1em; bottom:1em; padding:.5em .5em .5em 1em; color:#fff; background:rgba(0,0,0,.8);}
.cookies-bar:after {content:''; display:table; clear:both;}

.text-cookie {float:left; padding-top:.4em; font-size:80%; line-height:120%;}
.buttons-cookie {float:right; width:auto; padding-left:1em; white-space:nowrap;}

.buttons-cookie .cta-button {font-size:65% !important;}

@media only screen
and (min-device-width:300px) 
and (max-device-width:800px)
{
	.cookies-bar {right:0; bottom:0; left:0; padding:1em; border-radius:0; text-align:center;}
	.text-cookie, .buttons-cookie {float:none; padding:0;}
	.text-cookie {margin-bottom:1em; font-size:70;}
}

/* icons */
@font-face{font-family:fontello; src:url(icon.woff) format('woff'); font-weight:400; font-style:normal;}
[class*=" icon-"]:before, [class^=icon-]:before {font-family:fontello; font-style:normal; font-weight:400; speak:none; display:inline-block; text-decoration:inherit; width:1em; text-align:center; font-variant:normal; text-transform:none; line-height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.icon-camera:before { content: '\e800'; } /* '' */
.icon-down:before { content: '\e801'; } /* '' */
.icon-headphones:before { content: '\e802'; } /* '' */
.icon-play:before { content: '\e803'; } /* '' */
.icon-close:before { content: '\e804'; } /* '' */
.icon-mail:before { content: '\e805'; } /* '' */
.icon-chevron-right:before { content: '\e806'; } /* '' */
.icon-chevron-left:before { content: '\e807'; } /* '' */
.icon-right:before { content: '\e808'; } /* '' */
.icon-ok:before { content: '\e809'; } /* '' */
.icon-ccw:before { content: '\e80a'; } /* '' */
.icon-plus:before { content: '\e80b'; } /* '' */
.icon-minus:before { content: '\e80c'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-eraser:before { content: '\f12d'; } /* '' */
.icon-vevo:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-spotify:before { content: '\f1bc'; } /* '' */
.icon-copy:before { content: '\f1f9'; } /* '' */
.icon-brush:before { content: '\f1fc'; } /* '' */


/* embed */
.app-box {margin-bottom:0;}

.embed-promo {position:relative; margin:0 -5em 4em -5em; padding:5em; background:#BDE60E;}
.embed-intro {float:left; width:45%; text-align:left;}
.embed-promo blockquote {float:right;}

@media only screen
and (min-device-width:300px)
and (max-device-width:760px)
	{
		.app-box {margin-bottom:0;}
		
		.embed-promo {width:auto; margin:0 -1em 2em -1em; padding:2em 1em;}
		.embed-intro {float:none; width:100%; text-align:center;}
		.embed-promo blockquote {float:none; margin:1em auto 0 auto !important; width:100% !important; min-width:100% !important; max-width:100% !important;}
	}