@import url('https://fonts.googleapis.com/css?family=Montserrat:300,700');

/*
https://coolors.co/171717-454545-737373-e7e7e7-f1f1f1
*/

/* 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 {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:#171717; background-color:#F1F1F1;}
::-moz-selection {color:#171717; background-color:#F1F1F1;}

body {overflow-x:hidden; color:#F1F1F1; font:300 1em/1em 'Montserrat', sans-serif; text-align:center; background:#171717;}

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:#e7e7e7; text-decoration:none;}

.clear {clear:both;}

#content {position:relative; z-index:100; padding:2em 4em; background:#454545;}

header, footer, section {position:relative; z-index:100;}

/* background */
.intro-photo {position:absolute; z-index:90; top:0; right:0; left:0; height:130vh;
background-image:url(foto-bg.jpg); background-position:center top; background-repeat:no-repeat; background-color:#737373; background-size:auto 100%; background-blend-mode:overlay;}

.intro-photo:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(69,69,69,1) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(69,69,69,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(69,69,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#171717',GradientType=0 );}

/* styles */
h2,
h5,
.cta-button,
.nav-button,
.nav-button a
{font-weight:700; text-transform:uppercase; letter-spacing:.1em;}

h2 {font-size:100%; line-height:120%;}
h2 br {display:none;}

h5 {font-size:110%; line-height:120%;}

h5.line {margin-bottom:1em;}
h5.line span {position:relative; display:block;}
h5.line span:after {content:''; position:absolute; left:50%; bottom:-.5em; width:2em; height:.1em; margin-left:-1em; background:#8C8C8C;}

p {font-size:90%; line-height:160%;}
p+p {margin-top:1em;}

p.small {font-size:60%;}

.cta-button,
.nav-button a
{cursor:pointer; display:inline-block; padding:1.5em; border:1.5px solid transparent; color:#fff; font-size:80%; line-height:100%; background:#171717;}

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

.nav-button {font-weight:300;}
.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:#F1F1F1; color:#F1F1F1; background:none;}

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

.cta-dark {background:#454545;}
.cta-dark:hover {background:#8C8C8C;}

.cta-light {color:#454545; background:#E7E7E7;}
.cta-light:hover {color:#E7E7E7; background:#454545;}

.cta-small,
.nav-button a,
.nav-button .button-title 
{font-size:55%; line-height:100%;}

.cta-round {border-radius:100%;}

.cta-square {position:relative; margin:0 .25em; width:5em; height:5em; padding:0;}
.cta-square i {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

.color-dark {color:#8C8C8C;}

.font-300 {font-weight:300 !important;}

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

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

.intro {padding-top:27.5%;}

.intro-logo {margin:0 auto 1em auto;}
.intro-logo img {width:50%; margin:0 auto .25em 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%;}
*/

/* app */
.app-hold {margin:4em -4em; padding:4em 30%; background:rgba(0,0,0,.5); box-shadow:0 0 20px rgba(0,0,0,.5);}

.app-step {position:relative; margin-bottom:2em;}

.cards-hold {margin:-.5em 0 0 -.5em;}
.cards-hold:after {content:''; display:table; clear:both;}

.card {position:relative; cursor:pointer; float:left; width:25%; padding-bottom:35%; border:1em solid transparent; border-width:.5em 0 0 .5em;}
.card:after {content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:url(bg-card.png) #E7E7E7; background-size:100% auto; border-radius:.5em;}

.card {transform:rotate(-1deg);}
.card:nth-child(odd) {transform:rotate(1deg);}

.canvas {overflow:hidden; position:relative; width:100%; margin:2em 0; padding-bottom:100%; background:#454545;}

.canvas-hold {position:absolute; z-index:100; top:50%; left:50%; width:80%; transform:translate(-50%, -50%);}
.canvas-img {display:block; width:50%; margin:0 auto 1em auto;}
.canvas-text {font-size:80%; line-height:150%; text-align:center;}

.canvas-cropped {position:absolute; z-index:90; top:0; right:0; bottom:0; left:0;}

/* crop image */
.crop-hold {margin:2em auto 0 auto; padding:2em 20%; background:#454545;}

.cropit-preview {width:100%; padding-bottom:100%; border:1px dashed #fff; background-size:cover;}
.cropit-preview-image-container {cursor:move;}

.inputfile {opacity:0; overflow:hidden; position:absolute; z-index:-1; width:0.1px; height:0.1px;}
.inputfile + label * {pointer-events:none;}

.size-hold {width:50%; margin:1em auto;}
.rotate-hold {margin-bottom:2em;}

input[type=range] {-webkit-appearance:none; width:100%; margin:0; background:transparent;}
input[type=range]:focus {outline:none;}

input[type=range]::-webkit-slider-runnable-track {-webkit-appearance:none; cursor:pointer; width:100%; height:5px; border:none; background:#ccc; border-radius:5px; box-shadow:none;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none; cursor:pointer; width:20px; height:20px; margin-top:-7.5px; border:none; background:#fff; border-radius:100%;}

input[type=range]::-moz-range-track {cursor:pointer; width:100%; height:5px; border:none; background:#ccc; border-radius:5px; box-shadow:none;}
input[type=range]::-moz-range-thumb {-webkit-appearance:none; cursor:pointer; width:20px; height:20px; margin-top:-7.5px;  border:none; background:#fff; border-radius:100%;}

/* effects app */
.cards-block.hide,
.select-image-btn.hide
{display:none;}

.canvas-block,
.crop-block
{overflow:hidden; height:1px;}

.canvas-block.show,
.crop-block.show
{height:auto;}

/* 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:.5em;}

.newsletter-box {position:relative; padding:2em; color:#454545;}
.newsletter-box:after {content:''; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0; background:#F1F1F1; box-shadow:5px 5px 5px rgba(0,0,0,.25);}

.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:50%; line-height:100%;}
.footer p a {color:#E7E7E7; border-bottom:1px solid #F1F1F1;}

.footer br {display:none;}

@media only screen
and (min-device-width:300px)
and (max-device-width:760px)
	{			
		#content {overflow:hidden; padding:1em;}
		
		/* background */
		.intro-photo {background-image:url(foto-bg-mobile.jpg);}
		
		/* styles */
		p {font-size:80%; line-height:160%;}
		
		h2 {font-size:80%; line-height:70%;}
		h5 {font-size:80%;}
		
		h2 br {display:block;}
		
		.cta-button {font-size:70%; line-height:150%;}
				
		.cta-small {font-size:55%; line-height:150%;}
		
		.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 {padding-top:60%;}

		.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;}*/
		
		/* app */
		.app-hold {margin:2em -1em; padding:2em 1em;}
		
		.app-step {margin-bottom:1em;}
		.app-step p {font-size:70%;}

		.cards-hold {margin:-.25em 0 0 -.25em;}
		.card {border-width:.25em 0 0 .25em;}

		.canvas {margin:1em 0 .5em 0;}

		.canvas-img {width:35%; margin-bottom:.5em;}
		.canvas-text {font-size:60%}

		/* crop image */
		.crop-hold {margin:1em auto; padding:1em;}

		.size-hold {width:100%; margin:2em auto;}

		/* side */
		.playlist-box,
		.newsletter-box
		{float:none; width:100%; border-width:0;}

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

		/* footer */
		.footer {margin-top:3em;}
		
		.footer img {height:2em;}
		.footer p {font-size:60%; line-height:140%;}

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

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

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

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

@media only screen
and (min-device-width:300px) 
and (max-device-width:800px)
{
	.cookies-bar {right:0; bottom:0; left:0; padding:1em; text-align:center; background:#8C8C8C;}
	.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-download:before { content: '\e801'; } /* '' */
.icon-headphones:before { content: '\e802'; } /* '' */
.icon-ccw:before { content: '\e803'; } /* '' */
.icon-cw:before { content: '\e804'; } /* '' */
.icon-chevron-right:before { content: '\e806'; } /* '' */
.icon-chevron-left:before { content: '\e807'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-vevo:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-spotify:before { content: '\f1bc'; } /* '' */
.icon-copy:before { content: '\f1f9'; } /* '' */
.icon-camera:before { content: '\f4f7'; } /* '' */