@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:#183b80; --claro:#c8c8c8; --sombra:-2px 2px 10px rgba(0,0,0,0.1); }
body { color:#000; background:#fff linear-gradient(90deg, #fff, #fff 75%, #ccc 75%, #ccc); 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; color:#ccc; background:#101010; padding:0.5em; width:50%; float:left; height:3em; text-align:right; transition:top 0.5s; }
nav.sobe { top:-3em; }
	nav.sobe ul { left:-10em; }
nav.sobe.desce { top:0; }
	nav:after{ content:''; position:absolute; border:3em solid transparent; border-width:3em 3em 0 0; border-top-color:#101010; left:100%; top:0; }
	nav img { height:100%; }
	nav>a { font-size:1.5em; font-weight:100; font-weight:bold; }
	nav ul { position:absolute; left:5px; top: 1em; cursor:pointer; margin-left:10px }
		nav li { float:left; margin-right:1em; position:relative; padding:0 1em 1.3em; line-height:1em; }
		nav li a:hover, nav li.ativo { color:#fff; font-weight:bold; }
			nav li ul { display:none; color:#ccc; position:absolute; left:-10px; top:2em; margin:-10px 0 0; padding-top:15px; text-align:left;}
			nav li:hover ul { display:block; }
			nav li>ul>li { float:none; padding:0.5em; white-space:nowrap; background:#101010; }
.trabalhos { background:#000; overflow:hidden; }
	.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; z-index:-1; background:rgba(0,0,0,0.5); 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:#ccc; z-index:1; text-align:left; }
			.trabalhos li.tocando span { position:static; padding:0; line-height:1; }
				.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; }
.col { float:left; width:75%; padding:2em; }
.col+.col { background:none; width:25%; }
	.col i {background:#000; color:#fff; text-align:center; line-height:3em; border-radius:50%; width:3em; height:3em; display:inline-block;} 
	.padrao h1, h1 { font-size:2em; margin:0 0 0.5em; text-transform:uppercase; font-weight:bold; }
	.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(--claro); }
	.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(--claro); }
		.padrao ol>li:before { content:counters(li,'.')' '; counter-increment:li;font-weight:bold; color:var(--claro); 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(--claro); }
				.padrao li>ol>li:before, .padrao li>ul>li:before { position:static; margin-left:-1em; }
	
/* responsivo */
@media (min-width:1200px)  { 
	nav li:first-child ul { display:block; }
}
@media (max-width:1200px)  { 
::selection { background:none; }
	body { padding-top:4.5em; }
	nav { width:100%; font-size:1.5em; }
	nav.sobe { top:0; }
		nav>ul>li { padding:0 0.5em 1.3em; margin:0.1em; }
		nav>a { font-size:1.3em; line-height:1.6em; }
	.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; color:#000; }
	.col { float:none; width:100%; background:#fff; }
	.col+.col { width:100%; background:#ccc; }
}