@import url(animacoes.css);
@import url(popup.css);
@import url(paginacao.css);
@import url(form.css);

:root{
	--cor-t:#474747;
	--cor-a:#50c4e7;
	
	--cor-bot-n:#1faccf;
	--cor-bot-h:#29c4eb;
	--cor-bot-a:#009ec5;
	
	--titulos:#999999;
	
	--font-input:18px;
}

*{margin:0; padding:0; text-decoration:none; border:none; list-style:none; position:relative; font-size:0;}
input[type="button"]{color:transparent;}

body{font-family:Arial, Helvetica, sans-serif; background:#222222;
/*	transform:skewY(5deg);*/
}

.base{width:100%; margin-right:auto; margin-left:auto;}

.none{display:none;}

.inline{display:inline-block;}
.t-cell{display:table-cell;}
.v-top{vertical-align:top;}
.v-mid{vertical-align:middle;}

.a-left{text-align:left;}
.a-right{text-align:right;}
.a-center{text-align:center;}

.block{display:block;}
.tabela{display:table;}
.borda{border:solid 1px;}

.b-dir{border-right:solid 1px #ccc;}

.m-top{margin-top:20px;}
.m-bot{margin-bottom:20px;}
.m-left{margin-left:10px;}
.m-l20{margin-left:20px;}
.m-t10{margin-top:10px;}

.p-top{padding-top:20px;}
.p-bot{padding-bottom:20px;}

.pr-10{padding-right:10px;}

.ctitulo{position:absolute;}

.padding{padding:20px;}

.botao{background:#dfdfdf;}
	.botao div{padding:20px; font-size:14px; color:#ffffff; text-align:center;}
	.botao:hover{cursor:pointer;}

.botao.ativo{background:#333333;}
.botao.ativo:hover{cursor:pointer;}
	.botao.ativo:hover::before{content:''; width:100%; height:100%; top:0; left:0; position:absolute; background:#ffffff; opacity:0.5;}

.campo, .ns{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.s-bar::-webkit-scrollbar{width:5px;}
			.s-bar::-webkit-scrollbar-button{display:none;}
			.s-bar::-webkit-scrollbar-thumb{background:#00000050;}




iframe.logar{background:#ffffff; border:solid 3px #666666;
			width:calc(100% - 40px);
			height:calc(100% - 40px);
			position:fixed;
			top:20px;
			left:20px;
			display:none;
			z-index:9;
}


a{color:var(--cor-a);}
	a:hover{text-decoration:underline;}



.bg-none{background:none !important;}
.float-r{float:right;}
.float-l{float:left;}

.girar{animation:girar 0.5s;}

#blur{position:fixed; left:0; top:0; width:100%; height:100%; backdrop-filter: blur(50px); z-index:2; display:none;}


#load{width:100%; height:100%; background:rgba(255,255,255,0.5); position:fixed; top:0; left:0;}

.loading{background:#ffffff90; padding:20px; position:fixed; height:calc(100% - 20px); width:calc(100% - 20px); z-index:99;}
	.loading > div{position:absolute; top:calc(50% - 10px);  left:calc(50% - 40px);}
	
	.load{background-color:#ffffff90; position:absolute; width:100%; height:100%; z-index:9; display:none;}



.degrade{background-image: linear-gradient(to right, #f5388c, #f59e39);}


.fundo-a{background:#ffffff;}
.fundo-b{background:#f9f9f9;}




.logotipo .inline{vertical-align:middle;}
	.logotipo .logo img{height:40px;}
	.logotipo .nome img{height:20px;}
	
	

#topo{width:100%;}



.painel{position:absolute; right:0; top:0;}

	.painel .foto img{width:40px;}



	.painel .msg p{font-size:18px; color:var(--cor-n); text-align:right;}
		.painel .msg p a{color:var(--cor-a);}
		.painel .msg p *{font-size:1em;}



	.painel .opcoes{
		position:fixed; 
		right:10px; top:10px; width:150px;		
		z-index:3;
	}
		.painel .opcoes ul li{font-size:14px; color:#ffffff; text-align:right;}
			.painel .opcoes ul li a{font-size:1em;}
			.painel .opcoes ul li a:hover{color:var(--cor-a);}



.logotipo:hover nav{display:block;}

nav{display:none; position:absolute; width:100%; height:auto; z-index:1;}
nav ul{display:flex; flex-wrap:wrap;}
	nav ul li{width:100%; font-size:18px; background:#09F; color:#ffffff;}
		nav ul li div{font-size:18px;}
		nav ul li .padding{padding-left:0; padding-right:0;}
	nav ul li a{font-size:inherit; color:inherit; padding:20px;}

.principal ul li{font-size:14px;}

.opcoes-404{margin-top:40px;}
	
	.principal ul.opcoes-404 li{font-size:24px;}



.principal h1{font-size:44px; color:#666666;}
.principal p{font-size:16px; color:#333333;}


.principal .lista{display:flex; flex-wrap:wrap; justify-content:space-around; margin-top:5%;}
	.principal .lista article:not(.capa){padding:20px; padding-bottom:60px; padding-top:30px; box-shadow:3px 3px 20px #00000020; width:25%; margin-bottom:4%;}
		.principal .lista article img{width:100%;}
		
		
		.principal .lista article a{font-size:14px; background:#333333; color:#ffffff; padding:20px;}
		
			.principal .lista article ul{display:flex; justify-content:space-between;}
				.principal .lista article ul li{font-size:18px;}
					.principal .lista article ul * *{font-size:inherit;}
					
					.principal .lista article ul li .padding{padding-left:0; padding-right:0;}
					
					
					
		
		.capa{width:25%; display:flex; flex-wrap:wrap; justify-content:space-around; margin-top:5%;}		
		.capa h2{font-size:18px; width:100%; flex:100%; margin-bottom:10%;}		
		.capa img{background:#ffffff; padding:10px; width:20% !important; box-shadow:3px 3px 20px #00000020; margin-left:-20%; transition:all 0.3s;}
					
			.capa img:nth-child(2){margin-left:0;}		
		
		.capa:hover{cursor:pointer;}
			.capa:hover img:nth-child(3){transform:rotate(5deg);}
			.capa:hover img:nth-child(4){transform:rotate(10deg);}
			.capa:hover img:nth-child(2){transform:rotate(-5deg);}
			
		.capa .mais{font-size:60px; color:#cccccc; width:24%; display:flex; align-items: center;}
		
		
		
		
		
		
		

.dados-mod .inline{vertical-align:middle;}

.dados-mod .foto img{width:69px; border-radius:50%;}

	.dados-mod h1{font-size:33px; color:var(--cor-t);}




.produtos{position:absolute; right:20px; top:40px;}
	.produtos p{font-size:24px; text-align:right;}





.menu ul li{display:inline-block; padding:20px;}

	.menu ul li *{font-size:18px; color:var(--cor-t);}










.principal > .padding{padding-left:21px; padding-top:21px; text-align:center;}



.principal p, .principal p *{font-size:24px; color:#3e3e3e;}

.principal h2{font-size:24px; text-align:left; color:#333333; margin-bottom:20px;}

	.principal h2:not(.principal h2:first-child){margin-top:60px;}

.principal a{color:var(--cor-a); font-size:inherit;}
	
	
	
	
	
	.principal h1{font-size:35px; color:var(--titulos);}
	
	
	
	
	.principal .logar{text-align:center;}	
	
	
	.logar .logo img{height:390px;}
	
	.logar .deusa{position:absolute; border-radius:50%; left:calc(50% - 110px); top:calc(50% - 110px); z-index:1; border:solid 5px #ffffff;}
		.deusa img{border-radius:50%;}
	
	
	
	
	
p.responsavel{font-size:16px;}
	
	.principal.editar .miniaturas div{margin-bottom:5%;}
		.principal.editar .miniaturas div p{text-align:left;}
		.principal.editar .miniaturas div .campo{margin-top:20px;}
	
	


.principal .item{display:inline-block; width:calc(20% - 1px); border:solid 1px #eaeaea; margin-left:-1px; margin-top:-1px; vertical-align:top;}

	.principal .item:hover{border-color:#878787; z-index:1;}


	.item img{width:100%;}


	.preco, .marcas{padding:10px; color:#ffffff; font-size:14px; position:absolute; left:20px; top:20px; z-index:1;}
	
	.preco{background:#e0596f;}
	.marcas{background:var(--cor-t);}

	
	
		
		
	.add{background:#bccf1f;}
		.add:hover{background:#cde509;}
		.add:active{background:#9caf00;}
	
	.baixar{background:#4eb6e4;}
		.baixar:hover{background:#34c1ff;}
		.baixar:active{background:#1188bd;}
		
	.ver{background:var(--cor-bot-n);}
		.ver:hover{background:var(--cor-bot-h);}
		.ver:active{background:var(--cor-bot-a);}
		





		
		

.copiar{position:absolute; right:0; top:0; width:15px; height:15px; z-index:1;}
	.copiar div[class*="quadro-"]{border:solid 1px #ffffff; width:12px; height:15px; position:absolute;}
	.copiar .quadro-1{left:0; top:5px;}
	.copiar .quadro-2{left:5px; top:0px;}		
	.copiar:hover div[class*="quadro-"]{border-color:var(--cor-a); cursor:pointer;}
	
	.copiar input{font-size:1px; color:transparent; padding:0; width:1px; height:1px; background:none; outline:none;}



.rodape ul li{display:inline-block; vertical-align:middle; border-right:solid 1px #cbcbcb; padding-right:10px; padding-left:10px;}
	.rodape ul li:first-child{padding-left:0;}
	.rodape ul li:last-child{border-right:0;}
		
	.rodape ul li *{font-size:14px; color:#cbcbcb;}

		.rodape ul li a:hover{color:#ffffff;}





@media screen and (max-width: 420px) {
	header h1{font-size:40px;}
	header p{font-size:14px;}
}