/*-----------------------------------------------------------------*/
/* 01. CSS 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, a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: 0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html { 
	min-height: 100%;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height:auto;
	width: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}

input[type="text"],input[type="password"],input[type="email"], textarea {
	width: 100%;
	font-family: inherit; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #d9d9d9;
}

/******************************************************************
/******************************************************************
/******************************************************************
/******************************************************************/

.clear-both{ clear: both; }
.vertical-center-align{ display: flex; flex-direction: column; justify-content: center; }
.center-align{ text-align: center; }
.right-align{ text-align: right; }
.destaque{ font-weight: bold; color: #E589FF; }
.destaque-dark{ font-weight: bold; color: #8700AC; }

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

body, html { font-family: sans-serif; scroll-behavior: smooth; background-color: #000; color: #FFF; }
p{ padding: 20px 0 10px;}

.parallax-section { position: relative; height: 100vh; background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; z-index: 1; }
.parallax-section.half{ height: 50vh; }
.parallax-section .overlay{     background: transparent url("../img/overlay.png"); opacity: 0.5; z-index: 0; width: 100%; height: 100%; position: absolute; z-index: 3; top: 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.parallax-euforia { background-image: url('../img/image-00.jpg'); }
.parallax-amplificadores { background-image: url('../img/image-01.jpg'); }
.parallax-guitarra { background-image: url('../img/image-02.jpg'); }
.parallax-pessoas { background-image: url('../img/image-03.jpg'); }
.parallax-solitario { background-image: url('../img/image-04.jpg'); }

.overlay-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white;  z-index: 2; pointer-events: none; text-align: center; z-index: 5; }
.overlay-text h1{ font-size: 3rem; font-weight: bold; text-shadow: 0 0 10px rgba(0,0,0,0.5); }

.intern .overlay-text h1{ font-size: 5rem; font-weight: bold; text-shadow: 0 0 10px rgba(0,0,0,0.5); }

.cover .equalizer{ margin: 0 auto; width: 50px; margin-bottom: 20px; }
.cover p{ max-width: 60%; margin: 0 auto; font-size: 1.2rem }

.equalizer { display: flex; gap: 6px; align-items: flex-end; height: 40px; justify-content:center; }
.equalizer .bar { width: 10px; background-color: #D334FF; height: 20px; animation: grow-logo 1s infinite ease-in-out; transform-origin: bottom; }
.equalizer .bar:nth-child(1) { animation-delay: 0s; animation-duration: 0.5s; }
.equalizer .bar:nth-child(2) { animation-delay: 0.2s; animation-duration: 0.8s; }
.equalizer .bar:nth-child(3) {	animation-delay: 0.4s; animation-duration: 1s; }

.top{ padding: 20px 0; position: fixed; background-color: #000; z-index: 99999; width: 100%; }
.top .logo{ font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 32px; font-weight: 700; }
.top .logo .icon .equalizer .bar{ height: 10px; }
.top .logo a{ color:#FFF;}
.top .menu { list-style: none; display: flex; justify-content: flex-end; padding: 0; margin: 0; background-color: transparent; }
.top .menu li { padding: 10px 20px; border-left: 1px solid #D334FF; color: white; cursor: pointer;}
.top .menu li:first-child { border-left: none; }
.top .subtitle { font-size: 25px; text-transform: uppercase; font-weight: 300; color: #939393; font-family: 'Titillium Web', sans-serif; }
.top .menu.mobile{ display: none; text-align: right; padding-right: 10px; }
.top .menu.mobile img{ cursor: pointer; }

#menu-mobile{ background-color: #FFF; color: #000; position: fixed; top: 80px; width: 100%; z-index: 5; padding: 15px; text-align: center; display: none; }
#menu-mobile .item{ padding: 5px 0; border-bottom: solid 1px #CCC; line-height: 1.5}
#menu-mobile .item.last{ border: none; }

.content { padding: 30px 0; align-items: center; justify-content: center; font-size: 1.2rem; background-color: #000; }
.content h2 { font-size: 35px; text-transform: uppercase; font-weight: 300; color: #939393; font-family: 'Titillium Web', sans-serif;
    text-align: center; }
.content .spacer { width: 65px; height: 3px; margin: auto; margin-bottom: 30px; background: #D334FF; }
.content.footer{ font-size: 1rem; text-align: center; }

.play-btns { width: 20px; margin-top: 3px; height: 20px; position: relative; overflow: hidden; }
button.btn-play, button.btn-pause { width: 20px; height: 20px; border-radius: 50%; border: none; color: #fff; cursor: pointer; box-shadow: none; outline: none; position: absolute; top: 0px; left: 0px; right: 0px;}
button.btn-play { background: url("../img/play-pause-disc.png") no-repeat; background-color: #4C4C4C; z-index: 9999; background-position-x: right; padding: 5px; }
button.btn-pause { background: url("../img/play-pause-disc.png") no-repeat; background-color: #D334FF; z-index: 9999; background-position: -20px -20px; padding: 5px; display: none; }
button.btn-play:hover{ background-color: #D334FF; }
#panelMusics a.download{ background-color: #4C4C4C; color: #FFF; font-size: 12px; font-weight: bold; border-radius: 10px; padding: 5px; cursor: pointer; }
#panelMusics a.download:hover{ background-color: #D334FF }
#panelMusics .music{ margin: 10px 0; }
#panelMusics .track{ color: #D334FF; font-size: 1.5rem; font-weight: bold; }
#panelMusics .info{ margin: 20px 0; background-color: #FFF; border-radius: 10px; padding: 20px; color:#000; font-size: 1rem; display: none; position: relative; }
#panelMusics .info .buttons { list-style: none; display: flex; justify-content: flex-start; padding: 0; margin: 0; background-color: transparent; }
#panelMusics .info .buttons li{ background-color: #FFF; color:#D334FF; border-radius: 5px; padding: 5px; margin-right: 10px; font-weight: bold; border: solid 1px #D334FF; cursor: pointer; }
#panelMusics .info .buttons li:hover{ background-color: #F7DAFF; }
#panelMusics .info .buttons li.active{ background-color: #D334FF; color:#FFF; }
#panelMusics .info .close{ position: absolute; right: 20px; cursor: pointer; font-weight: bold; color: #D334FF; }
#panelMusics .info div.history{ display: none; }
#panelMusics .info p{ line-height: 1.3; }
#panelMusics .info h3{ padding: 30px 0 5px; color: #8700AC; border-bottom: solid 3px #8700AC; font-weight: bold; width: fit-content; font-size: 1.5rem; margin-bottom: 10px; }
#panelMusics .info div.lyric span.active{ background-color: #D334FF; color: #FFF; border-radius: 5px; padding: 0 5px; font-weight: bold; }
#panelMusics .note{ color: #707070; text-align: center; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 30px; }

#audioControls{ position: fixed; bottom: 0; margin: 0 auto; z-index: 9999999; width: 100%; display: none; }
#audioControls audio{ width: -webkit-fill-available; }

#panelContact .field{ background-color: #1A1A1A; border: solid 1px #FFF; border-radius: 5px; color: #FFF }
#panelContact .btn{ display: flex; flex-direction: row; justify-content: flex-end; }
#panelContact .status{ color: #E589FF; font-size: 1rem; }
#panelContact #btnSubmit{ background-color: #D334FF; color: #FFF; border: none; padding: 3px 10px; font-size: 1rem; border-radius: 5px; cursor: pointer; }
#panelContact .loading{ width: 40px; height: 40px; }

/* ANTES QUE PASSE */
.parallax-antes-que-passe-1 { background-image: url('../img/antes-que-passe-capa.jpg'); }
#panelMusics,#panelProject,#panelContact{ padding: 0 20%; }

#panelDiscography{ padding: 0 10%; }
#panelDiscography .title{ padding: 20px 0; }
#panelDiscography .title a:hover{ color:#D334FF; text-decoration: underline; }

@keyframes grow-logo { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(3); }}

/* RESPONSIVO */

@media only screen and (max-width: 780px){
	.menu.desktop{ display: none; }
	.top .menu.mobile{ display: block; }
	.top .subtitle{ display: none; }
	#panelMusics,#panelProject,#panelDiscography,#panelContact{ padding: 0 5%; }
	.intern .overlay-text h1{ font-size: 3rem; }
	.home .cover .overlay-text h1{ font-size: 2rem; }
	.home .cover .overlay-text{ left: 10%; transform: translate(-5%, -50%); }
}