@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');
@import url('img/ico/fontawesome.css');

/* reset */
* { margin:0; padding:0; border:0 none; outline:0; vertical-align:baseline; background:transparent; text-decoration:none; font:inherit; list-style:none; quotes:none; border-collapse:collapse; border-spacing:0; resize:none; box-sizing:border-box; letter-spacing:inherit; color:inherit; text-align:inherit; left:auto; top:auto; }
@-ms-viewport { width:extend-to-zoom; zoom:1.0; }
a { cursor:pointer; }
:focus { outline:0; }
::-ms-clear { display: none;}

/* geral */
html { height:100%; --escuro:#0e0e0e; --prim:#a2c617; --sombra:-2px 2px 10px rgba(0,0,0,0.1); }
body { background:var(--prim); color:#fff; min-height:100%; width:100%; position:absolute; font:normal 16px/1.3 "Montserrat", Helvetica, sans-serif; }
nav { position:fixed; left:0; top:0; z-index:999; background:var(--escuro); padding:0.5em; width:50%; min-width:755px; float:left; height:4em; transition:top 0.5s; }
	nav:after{ content:''; position:absolute; border:4em solid transparent; border-width:4em 4em 0 0; border-top-color:#101010; left:100%; top:0; }
	nav img { height:48px; float:right; }
	nav ul { padding:0.5em; }
		nav li { display:inline-block; margin-right:1.5em; font-size:0.9em; position:relative; padding:0.5em 0;  }
		nav li a:hover, nav li.ativo { color:var(--prim); }
.trabalhos { background:#000; overflow:hidden; clear:both; }
	.trabalhos li { width:25%; aspect-ratio:16/9; float:left; font-size:1.5em; font-weight:100; position:relative; z-index:1; overflow:hidden; cursor:pointer; }
	.trabalhos li:first-child { width:100%; margin:-10% 0; z-index:0; }
	.trabalhos li:first-child:after { content:''; width:100%; display:block; background:#000; position:absolute; bottom:0; aspect-ratio:10; }
		.trabalhos div { position:absolute; z-index:10; left:0; bottom:0; width:100%; height:100%; padding:0.5em; opacity:0; color:#fff; transition:all 0.5s; text-align:center; }
		.trabalhos li:hover>div { opacity:1; }
		.trabalhos div:before { content:''; position:absolute; background:rgba(0,0,0,0.5); z-index:-1; left:0; top:0; width:100%; height:100%; transition:all 0.5s; }
			.trabalhos span { position:absolute; left:0; width:100%; top:50%; transform:translate(0,-50%); padding:0.5em; line-height:2; transition:all 0.5s; }
			.trabalhos li:hover span { line-height:1; }
			.trabalhos li:not(.tocando):first-child span { top:50%; bottom:auto; left:50%; transform:translate(-50%,-50%); }
				.trabalhos strong { display:block; font-weight:900; font-size:0.75em; line-height:1em; margin:0.5em 0; }
			.trabalhos p { display:none; }
		.trabalhos iframe { width:101%; height:101%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all 0.5s; background:url(img/loading.gif) center no-repeat; }
		.trabalhos li:hover iframe { transform:scale(1.1) translate(-45%,-45%); }
	.trabalhos li.tocando:first-child { margin:0; height:auto; aspect-ratio:auto; cursor:auto; }
	.trabalhos li.tocando:first-child:after { display:none; }
		.trabalhos li.tocando div { left:75%; width:25%; opacity:1; background:var(--escuro) url(img/ico_setas.gif) bottom right / contain no-repeat; z-index:1; text-align:left; }
		.trabalhos li.tocando div:before { display:none; }
			.trabalhos li.tocando span { position:static; padding:0; line-height:1; color:var(--prim); font-size:1.5em; }
				.trabalhos li.tocando strong { margin:0; }
			.trabalhos li.tocando p { display:block; font-size:1rem; margin-top:1em; font-weight:normal; }
		.trabalhos li.tocando iframe { width:75% !important; height:auto !important; position:relative; z-index:2; left:0; top:0; float:left; transform:none; aspect-ratio:16/9; }
.texto { background:var(--escuro); overflow:hidden; }
.col { float:left; width:75%; padding:2.5em; }
.col+.col { width:25%; }
	.col i { background:var(--prim); color:var(--escuro); text-align:center; line-height:3em; border-radius:50%; width:3em; height:3em; display:inline-block;} 
	.col i:hover { background:#fff; }
	.padrao h1, h1 { font-size:2em; margin:0 0 1em; text-transform:uppercase; font-weight:bold; color:var(--prim); }
	.padrao h2 { font-size:2em; font-weight:100; max-width:630px; }
	.padrao p { margin-bottom:1em; text-align:justify; }
	.padrao a { color:var(--escuro); text-decoration:underline; }
	 .padrao a i { text-decoration:inherit; }
	.padrao strong { font-weight:bold; }
	.padrao em { font-style:italic; }
	.padrao s { text-decoration:line-through; }
	.padrao mark { background:var(--medio); color:#fff; padding:0 0.25em; }
	.padrao blockquote { font-style:italic; color:var(--medio); padding-left:1em; border-left:0.2em solid var(--prim); }
	.padrao ul, .padrao ol { padding-bottom:1em; counter-reset:li; }
		.padrao li { padding:0 0 0.5em 1em; position:relative; overflow:hidden; text-align:justify; }
		.padrao ul>li:before { content:''; width:0.25em; height:0.25em; display:inline-block; margin:0 0.5em 0 -1em; border:0.2em solid var(--prim); }
		.padrao ol>li:before { content:counters(li,'.')' '; counter-increment:li;font-weight:bold; color:var(--prim); text-align:right; position:absolute; right:calc(100% - 0.75em); }
			.padrao li>ol, .padrao li>ul { margin:0.5em 0 0; padding-left:1em; border-left:2px solid var(--prim); }
				.padrao li>ol>li:before, .padrao li>ul>li:before { position:static; margin-left:-1em; }
.clientes { background:#fff; padding:2.5em; clear:both; color:#000; }
	.clientes h1 { text-align:center; }
	.clientes p { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1300px; margin:-1em auto; }
		.clientes img { margin:-1em 1em; height:120px; }
	
/* responsivo */
@media (min-width:1200px)  { 
	nav li:first-child ul { display:block; }
}
@media (max-width:1200px)  { 
::selection { background:none; }
	nav { position:static; width:100%; min-width:0; height:auto; }
	nav:after { content:'≡'; right:0; left:auto; border:0; font-size:2em; color:var(--prim); padding:0.25em 0.5em; cursor:pointer; }
		nav img { float:left; }
		nav ul { display:none; }
			nav ul li { width:100%; clear:both; text-align:right; font-size:1.25em; padding:0.25 0; }
	.trabalhos {}
		.trabalhos li { width:50%; }
		.trabalhos li:first-child { margin:0; }
		.trabalhos li:first-child:after { display:none; }
			.trabalhos li:not(:first-child) div { xopacity:1; }
			.trabalhos li iframe { width:100%; height:100%; }
			.trabalhos li.tocando iframe { width:100% !important; }
			.trabalhos li.tocando div { width:100%; position:static; clear:both; background-image:none; }
	.col { float:none; width:100%; }
	.col+.col { width:100%; }