Ir ao conteúdo
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.

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
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
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
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

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...