Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

CSS Problema responsividade site (media queries aplicando estilo para resulão maior

Luiz_Augusto_Silveira

Por Luiz_Augusto_Silveira
em Web e banco de dados

 Compartilhar

Posts recomendados

Luiz_Augusto_Silveira
 

Luiz_Augusto_Silveira

Postado
Postado

Eu comecei contruindo um site para celular utilizando um @media only screen and (max-device-width:320px){

}

para smartphones. Quando fui desenvolver para Desktop ele continuou aplicando alguns dos efeitos do media queria acima, mesmo a resolução do dispositivo sendo maior. (Eu utilizei a ferramenta de desenvolvedor do Google Chhrome para testar a resolução da tela). Quando tentava adaptar o site para o Desketop alguns efeitos eram aplicados e outros não(ficou uma bagunça). Alguém poderia me ajudar?

  

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Página Inicial do site</title>
	<!-- Estilo da página inicial do site -->
	<!--<link rel="stylesheet" href="_css/index.css">-->
	<link rel="stylesheet" href="_css/index.css">
	<!-- Ícones usados no site -->
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 
	<!-- Biblioteca JS w3.js -->
	<script src="https://www.w3schools.com/lib/w3.js"></script>
	<!-- Biblioteca Jquery -->
	<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body> <!--================== CORPO DOCUMENTO HTML ==================-->
	<!-- ÂNCORA PARA  TRAZER ATÉ O TOPO DA PÁGINA -->
 	<a name="topo"></a>
 	<!-- Div que conterá todas as partes do site -->
 	<div id="layout">
		<header class="header">
			
			
			<p> <span><i class="far fa-envelope"></i></span>[email protected]
			</p>
			
			
			
			<p> 
				<span><i class="faz fa-phone-volume"> </i></span>Telefone: (00) 0000-0000
			</p>
			
			<p class="destaque"> Fique conectado conosco: <span class="icones_header">
				<a href=""><i class="fab fa-twitter"></i></a>
				<a href=""><i class="fab fa-facebook-f"></i></a>
				<a href=""><i class="fab fa-google-plus-g"></i></a>
				<a href=""><i class="fab fa-linkedin-in"></i></a>
			</span>
			</p>
			
			
		</header>
		<section class="topodosite">
			<div class="logomarca">
				<h1>Logo Marca</h1>
			</div>
			<nav class="menu">
				<a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a>
				<ul id="imenu">
					<li><a href="">Home</a></li>
					<li><a href="">Empresa</a></li>
					<li><a href="">Serviços</a></li>
					<li><a href="">Blog</a></li>
					<li><a href="">Projeto</a></li>
					<li><a href="">Nossos Produtos</a></li>
					<li><a href="">Contato</a></li>
				</ul>
			</nav>
		</section>
		<section class="slideimagens">
			<img class="slide" src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="Legenda da primeira imagem">
		<img  class="slide" src="https://cdn.pixabay.com/photo/2018/02/16/22/08/bird-3158784_1280.jpg" alt="Legenda da segundo imagem">
		<img  class="slide" src="https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529_1280.jpg" alt="Legenda da terceira imagem">
		<div class="botoesslideshow">
			<button class="esquerdo" onclick="meuslideshow.previous()"><</button>
			<button class="direito"  onclick="meuslideshow.next()">></button>
		</div>
		<!-- Efeito de SlideShow com biblioteca w3.js-->

		<script>
			var meuslideshow = w3.slideshow(".slide", 0);
		</script>
		</section>
		<section class="conteudo">
				<div class="mensagem-boas-vindas bg-white">
					<article>
						<header>
							<h1>Bem-Vindos</h1>
						</header>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</article>
				</div>
				<!--Artigos Empresa-->
				<section class="artigos_empresa bg-white">
				<article class="artigo">
					<img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="">
					<div>
						<a><h1>titulo1</h1></a>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</article>
				<article class="artigo">
					<img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="">
					<div>
						<h1>titulo2</h1>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</article>
				<article class="artigo">
					<img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="">
					<div>
						<h1>titulo2</h1>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</article>
				
				</section>
		</section>
		<!-- Área de slides dos serviços oferecidos pela empresa -->
		<section class="slideservicos">
				<h1>Nossos Serviços 
				<div class="controles_slide_servicos">
				<button onclick="slideshowservicos.previous()"><</button>
				<button  onclick="slideshowservicos.next()">></button>
				</div>
				</h1>
				<hr>
				
			
			<div class="servicos">
				<article class="servico">
					<header>
						<span><i class="far fa-chart-bar"></i></span>
						<h1>Nome Serviço</h1>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					<a href="">Leia Mais</a>
				</article>
				<article class="servico">
					<header>
						<span><i class="fab fa-accusoft"></i>
				</span>
						<h1>Nome Serviço2</h1>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					<a href="">LEIA MAIS</a>
				</article>
			</div>
			
				<script>
					/* Efeito que cria o slide show com todos os elementos que possuem a classe .servico */
			var slideshowservicos = w3.slideshow(".servico", );
		</script>
			</div>
		</section>
		<section class="nossaempresa BGwhite">
			<article>
				<h1>Sobre nossa empresa</h1>
				<img src="https://cdn.pixabay.com/photo/2018/03/06/21/09/easter-3204589_1280.jpg" alt="">
				<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<h3 class="diferente">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				<a href="#" title="informações sobre a empresa"> READ MORE</a>
				<div class="vantagens_empresa">
				<article class="vantagem">
					<header>
						<span><i class="faz fa-rocket"></i></span>
						<h3>Muita Experiência</h3>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				</article>

				<article class="vantagem">
					<header>
						<span><i class="faz fa-rocket"></i></span>
						<h3>Trabalhos Inovadores</h3>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				</article>

				<article class="vantagem">
					<header>
						<span><i class="faz fa-rocket"></i></span>
						<h3>Empresa Certificada</h3>
					</header>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
				</article>
			</div>

			</article>
		</section>
		<!-- Informações de contato da empresa -->
		<section class="detalhesdecontato bg-black">
			<div class="infocontato">
			<h1>Detalhes de Contato</h1>
			<p class="cordiferente">Escolha uma das formas de contato abaixo e por favor entre em contato conosco.</p>
			<p><span><i class="faz fa-phone-volume"></i></span>Telefone: (00) 0000-0000</p>
			<p><span><i class="faz fa-at"></i></span>[email protected]</p>
			<p><span><i class="faz fa-compass"></i></span>Rua, Cidade, pais</p>

			
			</div>
			<form action="#" method="POST" class="formulariocontatoprincipal">
				<h1>Esclareça alguma dúvida conosco.</h1>
				<input type="text"  placeholder="Nome*" required  id="nomecliente"/>
				<input type="tel" id="numerotelefonecliente" placeholder="Telefone*" required/>
				<input type="email" placeholder="Email*" id="emailcliente" required/> 
				<input type="text" placeholder="Assunto*" required id="escolhaassuntocliente" list="listaassuntos"/>
				<datalist id="listaassuntos">
					<option value="Assunto1"></option>
					<option value="Assunto2"></option>
					<option value="Assunto3"></option>
					<option value="Assunto4"></option>
					<option value="Assunto5"></option>
				</datalist>
				<input type="submit" id="botaoenviarmensagem" value="Enviar Agora"/>
			</form>
		</section>
		<!-- úLTIMAS POSTAGENS DO BLOG-->
		<section class="ultimas_postagens_blog BGwhite">
			<h1>últimas postagem do blog</h1>
			<div class="conteiner_ultimas_postagens_blog">
			<article class="ultima_postagem_blog">
				<header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt="">
				<h5 class="data_postagem">17 Março</h5>
				</header>

				<div><h3>By Admin | Categoria</h3></div>
				<a href=""><h3>Título da postagem</h3></a>
				<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
				<footer class="rodape_ultima_postagem_blog">
					
						<a href="#" title="Leia mais...">Leia Mais</a>
						<a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a>
				</footer>
			</article>
			<article class="ultima_postagem_blog">
				<header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt="">
				<h5 class="data_postagem">17 Março</h5>
				</header>

				<div><h3>By Admin | Categoria</h3></div>
				<a href=""><h3>Título da postagem</h3></a>
				<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
				<footer class="rodape_ultima_postagem_blog">
					
						<a href="#" title="Leia mais...">Leia Mais</a>
						<a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a>
				</footer>
			</article>
			<article class="ultima_postagem_blog">
				<header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt="">
				<h5 class="data_postagem">17 Março</h5>
				</header>

				<div><h3>By Admin | Categoria</h3></div>
				<a href=""><h3>Título da postagem</h3></a>
				<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
				<footer class="rodape_ultima_postagem_blog">
					
						<a href="#" title="Leia mais...">Leia Mais</a>
						<a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a>
				</footer>
			</article>
		</div>
		</section>
		<!-- últimos projetos feitos pela empresa -->
		<section class="ultimos_projetos_empresa BGcinzaclaro">
			<h1>últimos Projetos</h1>
			<div class="galeria_ultimos_projetos_empresa">
			<a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a>
			<a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/49/city-3213676_1280.jpg" alt=""></a>
			<a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a>
			<a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a>
			<a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a>
			<a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a>
		</div>

			<!-- Questões Frequentes sobre a empresa -->
			<section class="perguntasfrequentes BGcinzaclaro">
				<h1>Perguntas Frequentes</h1>
				<hr>
				<div onclick="efeitosanfona(1);">
					<h4 onclick="efeitosanfona(1);" ><span onclick="efeitosanfona(1);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4>
					<div id="divalvo1">
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<div onclick="efeitosanfona(2);">
					<h4 onclick="efeitosanfona(2);"><span onclick="efeitosanfona(2);" ><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4>
					<div id="divalvo2">
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<div onclick="efeitosanfona(3);">
					<h4 onclick="efeitosanfona(3);"><span onclick="efeitosanfona(3);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4>
					<div id="divalvo3">
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
					</div>
				</div>
				<script>
					/* Efeito sanfona nas perguntas frequentes */
					
					function efeitosanfona(FAQ){
						switch(FAQ){
							case 1:
								$("#divalvo1").toggle();
							break;
							case 2:
								$("#divalvo2").toggle();
							break;
							case 3:
								$("#divalvo3").toggle();
							break;
						}


				</script>
			</section>
			</section>

			<section class="slide_parceiros">
				<h1>
					 Parceiros
					<div class="controles_slide_parceiros">
						<button onclick="slideParceiros.previous()"><</button>
						<button onclick="slideParceiros.next()">></button>
					</div>

				</h1>
				<hr>
				<div class="banner_parceiro">
					<a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/13/02/43/eye-3221498_1280.jpg" alt="" class="bannerparceiro"></a>
					<a href="" class="parceiro_empresa"><img src="https://pixabay.com/pt/coruja-neve-coruja-da-neve-bird-3184032/" alt="" class="bannerparceiro"></a>
					<a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/08/04/18/waters-3207802__480.jpg" alt="" class="bannerparceiro"></a>
				</div>
				<script>
					var slideParceiros = w3.slideshow(".bannerparceiro", 0);
				</script>
			</section>
			<!-- Rodape do site -->
			<footer class="rodapedosite">
				<img src="" alt="LogoMarcaEmpresa">
				<p>Um pouco sobre a experiência da empresa.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

				<div class="linksuteis">
					<h1>Links úteis</h1>
					<ul>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link1</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link2</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link3</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link4</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link5</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link6</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link7</a></li>
						<li><span><i class="faz fa-angle-right"></i></span><a href="">Link8</a></li>
					</ul>
				</div>
				<!-- Newsletter do site -->
				<div class="newsletter">
					<h1>Newsletter</h1>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
					<form action="">
					<input type="email" placeholder="Digite seu email!">
					<button type="submit"><i class="faz fa-paper-plane"></i></button>
					</form>
				</div>

				<div class="redessociais">
					<h1>Siga-nos:</h1>
					<ul class="menu_redes_sociais">
						<li><a href=""><i class="fab fa-facebook-f"></i></a></li>
						<li><a href=""><i class="fab fa-twitter"></i></a></li>
						<li><a href=""><i class="fab fa-google-plus-g"></i></a></li>
						<li><a href=""><i class="fab fa-linkedin-in"></i></a></li>
					</ul>
				</div>

				<div class="menu_fim_rodape">
					<p> Copyright &copy 2018 Todos os direitos Reservados</p>
					<ul>
						<li><a href="">Home</a></li>
						<li><a href="">Serviços</a></li>
						<li><a href="">Blog</a></li>
						<li><a href="">Produtos</a></li>
						<li><a href="">Contato</a></li>
					</ul>
				</div>
			</footer>
 	</div>
 	<script >
  	/* Efeito de abrir e fechar menu do site */
  	var botaomenu = document.getElementById("botaomenu");
  	botaomenu.onclick = function(){
  		$("#imenu").toggle();
  	}
  </script>
</body>
@charset "UTF-8";

*{
	margin:0;
	padding:0;
	outline: none;
	box-sizing: border-box;
}
h1{
	font-size:36px;
}
h3{
	font-size: 20px;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	color:rgb(0,0,0);
}
body{
	font-size: 16px;
}

.bg-white{
	background-color: rgb(255,255,255);
}
.bg-black{
	background-color: rgb(0,0,0);
}
#layout{
	width:999px;
	height:auto;
	background-color: rgb(242,242,242);

}

/* Header do  site*/
.header{
	width:100%;
	height:50px;
	background-color: rgb(0,0,0);
	color:rgb(255,255,255);
	display: flex;
	flex-direction: row;
	flex-wrap:  nowrap;
	justify-content: space-around;
	align-items: center;
}
.header p{
	width: auto;
	height:auto;
}
.header p span{
	margin-right:  8px;
}
.header p:last-child span{
	margin-right: 0;
	margin-left: 10px;
}
.header p:last-child span a{
	color:white;
	margin-left: 10px;
}
.header p:last-child span a:first-child{
	color:white;
	margin-left: 0;
}
.header p:last-child span a:hover{
	color:#45c4e9;
}
/* Topo do site */

.topodosite{
	width:90%;
	margin:0 auto;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
}

.logomarca{
	width:35%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}
/* Esconder o botão de abrir e fechar menu nessa versão */
.btn-menu{
	display: none;
}
/* Estilizando e configurando menu do topo do site */
.menu {
	width:70%;
	height:100px;
}
.menu ul{
	width:100%;
	height:100%;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}
.menu ul li {
	display: inline-block;
	border-bottom: 3px solid inherit;
	height:100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.menu ul li a{
	width:auto;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
.menu ul li a:hover{
	border-bottom: 3px solid #45c4e9;
	transition: all 200ms ease-in 0;
	color: rgb(69, 193, 233);
}
/* EStilo para o slideshow abaixo do topo */

.slideimagens{
	display: none;
}


/*===========Conteúdo do site===============*/
.conteudo{
	width:100%;
	height:auto;
	padding: 0 5%;
}
/* Mensagem de boas-vindas do site */
.mensagem-boas-vindas{
	width:100%;
	height:auto;
	text-align: center;
	padding: 4%;
}
/* Artigos do blog da empresa na página principal do site */
.artigos_empresa{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-start;
	padding: 0 5%;
	padding-bottom: 30%;
}

/*Configuração de  cada artigo */

.artigo{
	width:auto;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;
	margin-left: 4%;
}
.artigo img{
	width:100%;
	height:195px;
}
.artigo div{
	width:90%;
	background-color: rgb(255,255,255);
	border: 1px solid rgba(0,0,0, 0.20);
	border-top: 4px solid rgb(0,0,0);
	padding: 4%;
	text-align: center;
	position: absolute;
	top:160px;
}
.artigo:hover div{
	border-top: 4px solid rgb(61,193,233);
	transition:  border-top  200ms  ease-in-out 0;
}
.artigo:hover h1{
	color: rgb(61,193,233);
	transition:  color  200ms  ease-in-out 0;
}
.slideservicos{
	display: none;
}
/*Informações sobre a empresa */
.nossaempresa{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content:  center;
	align-items: center;
}
.nossaempresa article{
	width:90%;
	margin:0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
}
.nossaempresa article h1,img,h3,p,a{
	margin:15px 0;
}
.nossaempresa h1{
	width:100%;
	text-align: center;
}
.nossaempresa img{
	width:100%;
	height:auto;

}
.nossaempresa article h3{
	width:100%;
	text-align: left;
}
.nossaempresa article h3.diferente{
	color: rgb(61,193, 233);
}
.nossaempresa article p{
	width:100%;
	text-align: justify;
	line-height: 25px;
}
.nossaempresa article a{
	width:193px;
	height:40px;
	background-color: #45c4e9;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	border-radius:  50px;
	padding: 3% 0;
	color: rgb(255,255,255);
	cursor: pointer;
	border: 3px solid rgb(61, 193, 233);
}

.nossaempresa article a:hover{
	background-color: rgb(255,255,255);
	color: rgb(61,193,233);
}
/* VANTAGENS DA EMPRESA */

.vantagens_empresa{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
}
.vantagem{
	width: 25%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin-left:  3%;
	border: 1px solid rgba(0,0,0,0.20);
	padding: 2.5%;
}
.vantagem:first-child{
	margin-left: 0;
}
.vantagem header{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content: space-between;
	align-items: center;
}
.vantagem header span{
	font-size: 2em;
	margin: 0 10px;
	color:rgb(61,193,233);
}
.vantagem header h3{
	width:80%;
	margin-left: 10px;
	font-size: 20px;
}
.vantagem p{
	width:100%;
	height:auto;
	text-align: justify;
}
.vantagem:hover{
	border: 1px solid rgba(61,193,233);
}

/* Detalhes de contato da empresa */
.detalhesdecontato{
	width:100%;
	height:auto;
	padding: 5% 5%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	color:white;
}

.infocontato{
	width:35%;
	height:auto;
	background-color: rgba(0,0,0, 0.80);
	padding:4%;
}
.infocontato h1{
}
.infocontato p{
	line-height: 25px;
	width:100%;
}
.cordiferente{
	color:#848484;
}
.infocontato p span{
	margin-right:  15px;
	color:rgb(61,193,233);
}
.formulariocontatoprincipal{
	width:70%;
	height:auto;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
}
.formulariocontatoprincipal h1{
	margin-bottom: 45px;
}
.formulariocontatoprincipal input[type="text"],input[type="email"],input[type="tel"]{
	width:45%;
	margin-top: 35px;
	height:40px;
	padding:0 2.5%;
	border:1px solid rgba(230,230,230,0.40);
	background-color: rgb(0,0,0);
	color:rgb(255,255,255);
	font-weight: 700;
}

.formulariocontatoprincipal input:focus{
	border: 1px solid rgb(61,193,233);
}

.formulariocontatoprincipal input[type="submit"]{
	width:165px;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	background-color: rgb(61,193,233);
	color:rgb(255,255,255);
	border: 3px solid #45c4e9;
	border-radius: 50px;
	cursor: pointer;
	padding:2.3%;
	font-size: 1em;
	font-weight: 700;
	margin-top: 25px;
}

.formulariocontatoprincipal input[type="submit"]:hover{
	background-color:rgb(255,255,255);
	color: rgb(61,193,233);
}
/* Últimas postagens do blog na página principal*/
.ultimas_postagens_blog{
	width:100%;
	height:auto;
	padding:0 5%;
}
.ultimas_postagens_blog h1{
	width:100%;
	text-align: center;
	margin-bottom:25px;
}
.conteiner_ultimas_postagens_blog{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.ultima_postagem_blog{
	width:30%;
	border:1px solid rgba(0,0,0,0.20);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-align: justify;
}
.ultima_postagem_blog div{
	width:100%;
}
.ultima_postagem_blog div h3{
	width:100%;
	padding-left: 5%;
	color:rgb(0,0,0);
}
.ultima_postagem_blog a{
	width:100%;
	padding-left:5%;
}
.ultima_postagem_blog a:hover h3{
	color:rgb(61,193,233);
}
.ultima_postagem_blog p{
	width:100%;
	padding:2% 5%;
}
.rodape_ultima_postagem_blog{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: :space-around;
	align-items: center;
}
.rodape_ultima_postagem_blog a{
width: 50%;
text-align: center;

}
.rodape_ultima_postagem_blog a:first-child:hover{
	color:#45c4e9;
}
/* Últimos projetos realizados pela empresa */
.ultimos_projetos_empresa{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

}
.ultimos_projetos_empresa h1{
	display: block;
	width:100%;
	text-align: left;

}
.galeria_ultimos_projetos_empresa{
	width:100%;
	height:auto;
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-between;
	align-content: center;
}
.galeria_ultimos_projetos_empresa a{
	width:30%;
	height:auto;
}

@media only screen and (max-width: 320px) {
	/*---- RESET---- */
	*{
		margin:0;
		padding:0;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}

	ul{
		list-style: none;
	}
	a{
		text-decoration: none;
	}
	h1{font-weight: 400; color:rgba(0,0,0,1);line-height: 40px;}

	h3{font-size: 20px; color:rgba(0,0,0,1); font-weight: 500;}
	body{
		color:#848484;
		font-size: 16px;
    	line-height: 26px;
    	font-weight: 300;
	}
	/* Div que conterá todas as partes do site */
	#layout{
		width:100%;
		height: auto;
		margin:  0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: justify;
		    align-content: space-between;
		text-align: center;
	}
	/* Header do site */
	.header {
		width:100%;
		height:auto;
		background-color: black;
		color:rgba(255,255,255,1);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		    -ms-flex-direction:row;
		        flex-direction:row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		font-size: 1.2em;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		text-align: center;
		padding:  4% 2%;
	}
	.header div{
		width: 100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-ms-flex-line-pack: center;
		    align-content: center;
		max-width: 100%;
		margin-top: 4%;
	}
	.header div span{
		width:100%;
		font-size: 1em;

}
	.header div p{
		width:100%;
	}
	.header div p span{
		margin-right:  7px;
	}
	.icones_header{
		margin-left: 7px;
		margin-right: 0;
		}
	.icones_header a{
		color: rgba(255,255,255,1);
	}
	/* Topo do site */

	.topodosite{
		width:100%;
		height:150px;
		background-color: rgba(230,230,230,1);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		padding: 2%;
		position: relative;
	}
	.logomarca {
		width:100%;
		height:80px;

	}
	.menu{
		width:100%;
		height: 70px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		overflow:auto;
		z-index: 999;
	}
	.btn-menu{
		width:46px;
		height:46px;
		font-size: 1.2em;
		border: 1px solid rgba(0,0,0,0.50);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		margin-bottom: 4%;
		color: #45c4e9;
		background-color: rgba(255,255,255,1);
		margin-right: 2.5%;
	}
	.menu ul{
		width:100%;
		height:auto;
		display:none;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		position:absolute;
		top:150px;
		left:0;
		padding: 5% 5%;
		background-color: rgba(230,230,230,1);
	}
	.menu ul li{
		width:100%;
		height: auto;
		border:0.5px solid rgba(255,255,255,1);
	}
	.menu ul li a{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 100%;
		height: 100%;
		color: rgba(0,0,0,1);
		background-color:#45c4e9;
		padding: 3%;
		font-size: 1.7em;
	}

	.menu ul li a:hover{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		color: rgba(255,255,255,1);
		cursor: pointer;
	}
	/* Slideshow onde aparecerá algumas imagens relacionada a empresa */
	.slideimagens{
		width:100%;
		height:213px;
		background-color:rgba(0, 0, 0, 1);
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}
	.slideimagens img{
		width: 100%;
		height:100%;
	}
	.botoesslideshow{
		position: absolute;
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 0 4%;
	}
	.botoesslideshow button{
		width: 40px;
		height:40px;
		border:2px solid rgba(255,255,255,1);
		background: rgba(201,201,201,0.75);
		font-size: 1.5em;
		color: rgba(255,255,255,1);
		outline: none;
		
	}
	.botoesslideshow button:hover{
		border:2px solid #45c4e9;
		background: rgba(0,0,0,1);
		font-size: 1.5em;
		cursor: pointer;
	}
	/*Conteúdo do site */
	.conteudo{
		width:100%;
		height:auto;
		padding: 0 5%;
	}
	.mensagem-boas-vindas{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack:center;
		    align-content:center;
		text-align: center;
		padding-top: 20
		height:200px;
		max-width: 100%;
		margin-top: 65%;	
	}%;
	}
	.mensagem-boas-vindas header{
		width:100%;
	}
	.mensagem-boas-vindas header h1{
		font-size: 32px;
		font-weight: 400;
	}
	.mensagem-boas-vindas p{
		width:100%;
		font-size: 1.5em;
		margin-top: 10%;
	}
	.artigo{
		width: 100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		position: relative;
		margin-top: 15%;	
	}
	.artigo img{
		width: 100%;
	.artigo div{
		width:90%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		text-align: center;
		border: 1px solid rgba(0,0,0,0.20);
		position: absolute;
		top:328px;
		background-color: rgba(255,255,255,1);
		padding: 4% 0;
		margin-top: 3px solid rgba(0,0,0,0.50);
	}
	.artigo h1{
		width:100;
		margin: 0 0 10px;
		font-size: 36px;
	}
	.artgio p{
		width:100%;
		margin: 0 0 10px;
	}
	/* Slides dos serviços oferecidos pela empresa */
	.slideservicos{
		width:100%;
		height: auto;
		margin-top: 40%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding-top: 20%;
		background-color: rgba(230,230,230,0.50);
	}
	.slideservicos h1{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		font-size:36px;
		padding: 0 3%;
	}
	.controles_slide_servicos{
	}
	.controles_slide_servicos a{
		font-size: 22px;
		color:rgb(0,0,0);
	}
	.servicos{
		width: 100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		background-color: rgba(230,230,230,0.50);
	}
	.servico{
		width:90%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		    -ms-flex-direction:row;
		        flex-direction:row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		border: 1px solid rgba(0,0,0,0.50);
		margin-top: 15%;
	}
	.servico header{
		width: 100%;
		height:159px;
		background-color: rgba(255,255,255,1);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
	}
	.servico header span{
		width: 100%;
		font-size: 3.5em;
	}
	.servico header h1{

	}
	.servico p{
		width:100%;
		height: auto;
		margin: 8% 0;
		line-height: 30px;
	}
	.servico a{
		width:132px;
		height:45px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		color: rgba(0,0,0,1);
		border: 1px solid rgba(0,0,0,0.50);
		border-radius: 39px;
		margin-bottom:12%;
		margin-left: 25.5%;
		font-weight: 700;
	}
	/* Área sobre informações da empresa */
	.nossaempresa{
		width:100%;
		height:auto;
		background-color:rgba(255,255,255,1);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-ms-flex-line-pack:center;
		    align-content:center; 
		text-align: justify;
		margin:  auto;
		padding: 20% 0;
	}
	.nossaempresa article{
		width:90%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-ms-flex-line-pack:center;
		    align-content:center;
		margin:auto;
	}.nossaempresa article h1{
		font-size: 36px;
		font-weight: 400;
		text-align: center;
		width:100%;
	}
	.nossaempresa article img{
		width:100%;
		height:auto;
		max-width: 100%;
		margin: 10% 0;
	}
	.nossaempresa article h3.diferente{
		color: #45c4e9;
	}
	.nossaempresa article p{
		color:#848484;
		line-height: 25px;
	}
	.nossaempresa article h1, img, h3, p{
		margin: 5% 0;
	}
	.nossaempresa article a{
		width:70%;
		height :50px;
		background-color: #45c4e9;
		color:rgb(255,255,255);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:nowrap;
		    flex-wrap:nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin-bottom: 20%;
		border-radius: 150px;
		border: 3px solid #45c4e9;
		position: relative;
		margin-right:30%;
		cursor: pointer;

}
.nossaempresa article a:hover{
	background-color: rgb(255,255,255);
	color: #45c4e9;
	-webkit-transition: all 1s ease-in 0s;
	-o-transition: all 1s ease-in 0s;
	transition: all 1s ease-in 0s;
}


	.vantagem{
		width: 100%;
		height:auto;
		border: 1px solid rgba(0,0,0,0.20);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		padding: 0 5%;
	}
	.vantagem header{
		width: 100%;
		height:auto;
		display:  -webkit-box;
		display:  -ms-flexbox;
		display:  flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
		margin-top:5%;
	}
	.vantagem header span{
		font-size:2em;
		color: #45c4e9;
	}
	.vantagem header h3{
		width: 90%;
		text-align: center;
	}
	.vantagem:hover{
		border: 1px solid #45c4e9 ;
	}

	/* Informações  de contato da empresa */
	.detalhesdecontato{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		background-color: rgba(0,0,0,1);
		padding: 20% 0;
	}
	.infocontato{
		width:90%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		background-color: #2b2b2b;
		text-align: left;
		padding: 8%;
	}
	.infocontato h1{
		color:rgb(255,255,255);
		font-size: 36px;
		width:100%;
	}
	.infocontato p{
		width: 100%;
		color: rgb(255,255,255);
	}
	.infocontato p.cordiferente{
		color:#848484;
	}
	.infocontato p span{
		margin-right: 8%;
	}
	.formulariocontatoprincipal{
		width: 90%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack:center;
		    align-content:center;
		padding: 20% 0;
	}
	.formulariocontatoprincipal h1{
		color: rgb(255,255,255);
		font-weight: 400;
		font-size: 36px;
	}
	.formulariocontatoprincipal input{
		width: 100%;
		height:56px;
		background-color: rgb(0,0,0);
		border: 2px inset rgba(230,230,230,0.20);
		margin: 7% 0;
		outline: none;
	}

	.formulariocontatoprincipal input:focus{
		border: 2px inset #45c4e9;
	}
	.formulariocontatoprincipal input[type="text"], input[type="email"], input[type="tel"]{
		padding: 1% 5%;
	}

	.formulariocontatoprincipal input[type="submit"]{
		width: 163px;
		height: auto;
		background-color: rgb(0,0,0);
		border: 2px solid #45c4e9;
		margin: 7% 0;
		border-radius: 50px;
		background-color: #45c4e9;
		font-size: 14px;
		font-weight:600;
		color:rgb(255,255,255);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:nowrap;
		    flex-wrap:nowrap;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding: 15px;
		float:left;

	}
	.formulariocontatoprincipal input[type="submit"]:hover{
		background-color: rgba(255,255,255);
		color:  #45c4e9;
	}
	.formulariocontatoprincipal input[list] option{
		padding: 25%;
	}
	/* úLTIMAS POSTAGENS DO BLOG */
	.ultimas_postagens_blog{
		width:100%;
		height: auto;
		background-color: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		margin:0;
	}
	.ultimas_postagens_blog h1{
		font-size: 36px;
		font-weight: 400;
		width:100%;
		text-align: center;
		margin-top:20%;
	}
	.ultima_postagem_blog{
		width:90%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
		margin-top:30px;
		border: 1px solid rgba(0,0,0,0.10);
	}
	}
	.ultima_postagem_blog header{
		width:100%;
		height: 172px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		position: relative;
	}
	.ultima_postagem_blog header img{
		width:100%;
		height:172px;
	}
	.data_postagem{
		width:61px;
		height:auto;
		background-color:  #45c4e9;
		color: rgb(255,255,255);
		position: absolute;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		text-align: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		top:10px;
		right:10px;
		padding: 2%;
		font-size: 16px;
    	line-height:25px;
    	font-weight: 300;
	}
	.ultima_postagem_blog div{
		width:100%;
		height:auto;
		padding: 2%;
		margin: 10px 0;
	}
	.ultima_postagem_blog div h3{
		width: 100%;
		height:auto;
		color:#848484;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		font-size: 16px;
	}
	.ultima_postagem_blog a{
		width:100%;
		text-align: left;
	}
	.ultima_postagem_blog a h3{
		color: #222222;
		width:100%;
		font-size: 22px;
		font-weight: 400;
		line-height: 26px;
		display: block;

	}
	.ultima_postagem_blog p{
		width:100%;
		height:auto;
		color:#848484;
		margin: 3% 0;
	}

	/* Estilizando rodape da postagem */

	.rodape_ultima_postagem_blog{
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack:justify;
		    -ms-flex-pack:justify;
		        justify-content:space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		border-top: 1px solid rgba(0,0,0,0.20);
		border-bottom:  1px solid rgba(0,0,0,0.20);
		padding: 10px;
	}
	.rodape_ultima_postagem_blog a{
		color:#222222;
		width:50%;
		text-align: center;
	}
	.rodape_ultima_postagem_blog a span{
		margin-right: 7px;
	}

	/* ÚLTIMOS PROJETOS  FEITOS PELA EMPRESA */
	.ultimos_projetos_empresa{
		width:100%;
		height:auto;
		display: block;
		background-color: #f7f7f7;
		padding: 20% 0;
		
	}
	.ultimos_projetos_empresa h1{
		width:100%;
		text-align: center;
		font-size:36px;
		font-weight: 400;
		margin-bottom:20%;
	}
	.ultimos_projetos_empresa a{
		width:90%;
		height:273px;
		display: block;
	}
	.ultimos_projetos_empresa a img{
		width:100%;
		height:273px;
		max-width: 100%;
		max-height: 100%;
		margin: 1% 0;
	}

	/* Respostas de algumas perguntas frequentes feitas pelos clientes */
	.perguntasfrequentes{
		width:100%;
		height: 1200px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:wrap;
		    flex-wrap:wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
		background-color: #848484;
	}
	.perguntasfrequentes h1{
		width:100%;
		color:red;
	}
	.perguntasfrequentes div{
		width:90%;
		background-color: rgb(255,255,255);
		border-bottom: 1px solid #ededed;

	}
	.perguntasfrequentes div h4{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack:  center;
		    -ms-flex-pack:  center;
		        justify-content:  center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		font-size: 18px;
		padding:4%;
	}
	.perguntasfrequentes div h4:hover span{
		color:#45c4e9;
	}
	.perguntasfrequentes div h4:hover{
		color:#45c4e9;
	}
	.perguntasfrequentes div h4 span{
		margin-right: 40px;
		font-size: 22px;
	}
	.perguntasfrequentes div div{
		width: 100%;
		display:none;

	}
	.perguntasfrequentes div div p{
		width:70%;
		float:right;
		margin-right:0px;
		color:#848484;;

	}
	/* Local onde ficará o slideshow com os banners dos Parceiros da empresa */
	.slide_parceiros{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
	}
	.slide_parceiros h1{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 5% 7%;
		font-size: 36px;
		font-weight: 400;
	}
	.controles_slide_parceiros{
		width: 35%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
	}
	.controles_slide_parceiros button{
		width:40px;
		height:40px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:nowrap;
		    flex-wrap:nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		border:1px solid rgba(0,0,0,0.50);
		background-color: rgb(255,255,255);
		color:#ababab;
		font-size: 20px;
	}

	/* Configurando e estilizando 
	local onde aparecerá o banner dos parceiros da empresa */
	.banner_parceiro{
		width:100%;
		height:255px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		padding: 0 25%;

	}
	.banner_parceiro a{
		width:215px;
		height:115px;
		display: block;
		text-align: center;
		position: relative;
	}
	.bannerparceiro{
		width:215px;
		height:115px;
		position: relative;
		border: 1px solid rgba(0,0,0,0.20);
		
	}
	/* ===== Rodapé do site ========= */
	.rodapedosite{
		width: 100%;
		height:auto;
		background-color: rgb(0,0,0);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: row;
		    flex-wrap: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
		padding: 20% 5%;
	}
	.rodapedosite h1{
		color: rgb(255,255,255);
	}
	/* Links úteis do site */
	.linksuteis{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
		padding: 15% 0;
	}
	.linksuteis h1{
		width:100%;
		color:rgb(255,255,255);
	}
	.linksuteis ul{
		padding: 10% 0;
	}
	.linksuteis ul li{
		width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}
	.linksuteis ul li span{
		color:#848484;
		margin-right: 20%;
	}
	.linksuteis ul li a{
		color: #848484;
		font-size: 16px;
	}
	
	.linksuteis ul li span:hover{
		color:#45c4e9;
		margin-right: 20%;
	}
	.linksuteis ul li a:hover{
		color:#45c4e9;
		cursor: pointer;
	}
	/* Newsletter do site */
	.newsletter{
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
	}
	.newsletter h1{
		width:100%;
		font-size:36px;
	}
	.newsletter form{
		width:100%;
		height: auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin: 10% 0;
		text-align: left;
	}
	.newsletter form input{
		width:80%;
		height:46px;
		background-color: rgb(255,255,255);
	}
	.newsletter form button{
		width:20%;
		height:46px;
		color:rgb(255,255,255);
		background-color: #45c4e9;
		border:none;
		font-size: 14px;
	}
	.newsletter form button:hover{
		width:20%;
		height:46px;
		color:rgb(255,255,255);
		background-color: #424141;
		border:none;
		font-size: 14px;
		cursor: pointer;
	}

	/* Redes Sociais da empresa */

	.redessociais{
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-ms-flex-line-pack: center;
		    align-content: center;
	}
	.redessociais h1{
		width:100%;
		font-size: 36px;
		padding:10% 0;

	}
	.menu_redes_sociais{
	width:100%;
	height: auto;
	display: block;
	margin: 7% 0;

	}
	.menu_redes_sociais li{
		display: inline-block;
		margin-left: 10px;
		height: auto;
	}
	.menu_redes_sociais li:first-child{
		margin-left: 0;
	}
	.menu_redes_sociais li a{
		width:40px;
		height: 40px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap:nowrap;
		    flex-wrap:nowrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		border:2px solid #323232;
		border-radius: 50%;
		color: #999999;

	}
	.menu_redes_sociais a:hover{
		background-color: #45c4e9;
	}

	/* Menu  no fim do rodapé */

	.menu_fim_rodape{
		width:100%;
		height:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    align-content: center;
	}
	.menu_fim_rodape p{
		width:100%;
		font-size: 14px;
		font-weight:400;
		text-align: center;
	}
	.menu_fim_rodape ul{

	}

	.menu_fim_rodape ul li{
		display: inline-block;
		margin-left: 10px;
	}
	.menu_fim_rodape ul li:first-child{
		margin-left: 0;
	}
	.menu_fim_rodape ul li a{
		font-size: 15px;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    color: #999999;
    font-weight: 400;
	}
	.menu_fim_rodape ul li a:hover{
		color:#45c4e9;
	}
}

Se algúem puder me ajudar, eu agradeço.

Link para o comentário
Compartilhar em outros sites
HwapX
 

HwapX

Postado
Postado

Seu css possui alguns erros como chaves não fechadas ou fechadas duas vezes, execute um linter no seu CSS como o http://csslint.net e corrija todos os erros isso já deve resolver.

 

Seu HTML também sobre de problemas semelhantes tags fechadas no local incorreto, caracteres especiais não escapados, etc...

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
groutmoustache
 

groutmoustache

Postado
Postado

Como disse o @HwapX, o código tem algumas chaves fechando, sem aberturas. Por isso, pra resolver, basta entrar no site que ele indicou, colar o CSS e clicar em "lint".

 

Dessa maneira, os sétimos primeiros itens da tabela são os que podem estar causando os erros. Se você resolvê-los, talvez tudo funcione como você queria.

 

Spoiler

Untitled.png.9e7c9da79720c6b61e2d4ba0ee11524b.png

 

Além disso, recomendo que aborde o CSS de outra forma: usando min-width. Portanto, com essa propriedade, você vai estar desenvolvendo no modelo Mobile First (dispositivos móveis primeiro) e não vai encontrar bugs nas medias queries.

 

Exemplo 

/**
* Espaço destinado as propriedades do menor dispositivo
*
* Use este espaço, antes das media queries, para criar estilos para o menor dispositivo possível.
*
*/

@media only screen and (min-width: 420px) {
	/* Estilos para dispositivos com largura mínima de 420px*/
}

@media only screen and (min-width: 570px) {
	/* Estilos para dispositivos com largura mínima de 570px*/
}

@media only screen and (min-width: 1024px) {
	/* Estilos para dispositivos com largura mínima de 1024px*/
}

 

  • Curtir 2
Link para o comentário
Compartilhar em outros sites
HwapX
 

HwapX

Postado
Postado

@Luiz_Augusto_Silveira não são muitos problemas como havia dito anteriormente, você pode verificá-los em https://validator.w3.org/, os principais são:

 

Os botões que devem exibir o sinal de > e <, devem ter o conteúdo convertido para entidades HTML(&gt; para > e &lt; para <). 

<!--
<button class="esquerdo" onclick="meuslideshow.previous()"><</button>
<button class="direito"  onclick="meuslideshow.next()">></button>
-->
<button class="esquerdo" onclick="meuslideshow.previous()">&lt;</button>
<button class="direito"  onclick="meuslideshow.next()">&gt;</button>

por volta da linha 150 uma div é fechada antes de fechar a section. 

	</div>
</section>

na linha 387 existe outra div sendo fechada sem a abertura correspondente. 

</div>

porém não consigo afirmar qual div está sobrando se é o primeiro ou o segundo.

  • Curtir 2
Link para o comentário
Compartilhar em outros sites
HwapX
 

HwapX

Postado
Postado

Normalmente eu sempre procuro cuidar da indentação assim esse tipo de problema fica visível mais facilmente.

 

Quanto a editores a maioria possui plugins que indicam erros presentes no código, alguns exemplos são:

 

Sublime Text

http://www.sublimelinter.com

https://packagecontrol.io/packages/SublimeLinter-html-tidy

https://packagecontrol.io/packages/SublimeLinter-hlint

https://packagecontrol.io/packages/SublimeLinter-csslint

https://packagecontrol.io/packages/SublimeLinter-jsl
https://packagecontrol.io/packages/phpfmt

 

Atom

http://atomlinter.github.io/

https://atom.io/packages/linter-htmllint

https://atom.io/packages/linter-csslint

https://atom.io/packages/linter-eslint

https://atom.io/packages/linter-php

 

VS Code

https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

https://marketplace.visualstudio.com/items?itemName=shinnn.standard

https://marketplace.visualstudio.com/items?itemName=ecodes.vscode-phpmd

 

Basta procurar na galeria de plugins do seu editor/ide por "lint".

  • Curtir 2
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...