/* QUERIES FOR IPAD/TABLETPC */
@media only screen and (max-width: 1024px), only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

	/* ------ Estrutura Geral e Home ------ */
	body { background: none; min-width: 660px; }
	.conteudo {width: 640px !important;}

	/******************** Atribuições Topo **********************/
	#topo { padding: 50px 0 100px; }
	#topo header#topo-completo #logo { width: 200px; }
	#topo header#topo-completo nav#menu { padding-top: 12px; }

	#topo header#topo-completo nav#menu ul li {
		font-size: 14px;
		margin-left: 15px;
	}

	header#topo-reduzido #logo { width: 200px; }
	header#topo-reduzido nav#menu { padding-top: 12px; }

	header#topo-reduzido nav#menu ul li {
		font-size: 14px;
		margin-left: 15px;
	}
	/******************* Atribuições Topo ***********************/

	/************************ Conteúdo **************************/
	section#servicos { padding: 60px 0; }
	section#servicos h1 { font-size: 30px; }
	section#servicos #boxes { margin-top: 50px; }
	section#servicos #boxes .box { width: 320px; }
	/************************ Conteúdo **************************/

	/******************* Atribuições Footer *********************/
	footer#rodape #informacoes #logo-footer { width: 200px; }

	footer#rodape #informacoes span {
		margin-top: 4px;
		width: 400px;
	}
	/******************* Atribuições Footer *********************/

	/******************* Atribuições Gerais *********************/
	.pagina { padding-top: 110px; }
	header#titulo { padding: 20px 0; }
	header#titulo h1 { font-size: 30px; }
	header#titulo img { margin: 15px 0; }
	/******************* Atribuições Gerais *********************/


	/*************************** Sobre **************************/
	article#intro { padding: 60px 0 30px; }
	article#intro #imagem { display: none; }

	article#intro #texto {
		float: none;
		width: 100%;
	}

	#topicos section.topico {
		margin: 0 16px;
		font-size: 13px;
		width: 180px;
	}

	#imagens { margin-top: 75px; }
	/*************************** Sobre **************************/

	/************************* Serviços *************************/
	#servicos-interna { padding: 40px 0 60px; }

	#servicos-interna section.servico {
		font-size: 14px;
		height: 370px;
		padding: 30px;
	}

	#servicos-interna section.servico .img { width: 200px; }

	#servicos-interna section.servico .texto { 
		width: 340px;
		padding: 20px;
	}

	#servicos-interna section.servico .texto h2 {
		font-size: 20px;
		margin: 20px 0;
	}
	/************************* Serviços *************************/

	/************************** Cases ***************************/
	p#intro-cases {
		display: block;
		line-height: 30px;
		padding: 80px 0;
	}

	#cases .case {
		margin: 0 10px 20px;
	    height: 320px;
	    width: 300px;
	}

	#cases .case h2 { padding: 15px 0 0 19px; }
	/************************** Cases ***************************/

	/*************************** Case ***************************/
	article#case-cliente { padding: 60px 0; }

	article#case-cliente #imagens-case {
		float: none;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	article#case-cliente #texto {
		float: none;
		width: 100%;
	}
	/*************************** Case ***************************/

	/************************* Contato **************************/
	#pagina-contato { padding: 60px 0; }
	#pagina-contato form#envia-contato { width: 350px; }

	#pagina-contato form#envia-contato label,
	#pagina-contato form#envia-contato input[type="text"],
	#pagina-contato form#envia-contato input[type="email"],
	#pagina-contato form#envia-contato textarea { width: 100%; }

	#contatos {
		text-align: right;
		float: right;
		width: 240px;
	}

	iframe { height: 300px; }
	/************************* Contato **************************/

}

@media only screen and (max-width: 1600px) {
	section.banner-section .banner .text h1 {
		font-size: 50px;
		line-height: 68px;
	}
}

@media only screen and (max-width: 1400px) {
	section.banner-section .banner .text h1 {
		font-size: 40px;
		line-height: 58px;
	}
}

@media only screen and (max-width: 680px) {

	/* ------ Estrutura Geral e Home ------ */
	body { min-width: 300px; }
	.conteudo { width: 85% !important; }

	/******************** Atribuições Topo **********************/
	#topo,
	#topo-reduzido { text-align: center; }

	#topo header#topo-completo #logo,
	#topo-reduzido #logo { float: none !important; }

	#topo nav#slick,
	#topo-reduzido nav#slick {
		background: #3983f6;
		cursor: pointer;
		color: #fff;
		font-weight: 700;
		display: block;
		height: 50px;
		line-height: 50px;
		margin-top: 20px;
		position: relative;
		z-index: 3;
	}

	#topo nav#slick:hover,
	#topo-reduzido nav#slick:hover { background: #02316b; }

	#topo header#topo-completo nav#menu,
	#topo-reduzido nav#menu {
		display: none;
		float: none;
		padding-top: 0 !important;
		position: absolute;
		z-index: 3;
		width: 280px;
	}

	#topo header#topo-completo nav#menu ul li,
	#topo-reduzido nav#menu ul li {
		background: #3983f6;
		display: block;
		float: none;
		margin-left: 0 !important;
		height: 40px;
		line-height: 40px;
		width: 100%;
	}

	#topo header#topo-completo nav#menu ul li a,
	#topo-reduzido nav#menu ul li a {
		display: block;
		color: #fff; 
		height: 40px;
		line-height: 40px;
		width: 100%;
	}

	#topo header#topo-completo nav#menu ul li a:hover,
	#topo-reduzido nav#menu ul li a:hover { background: #02316b; }

	#topo #banner { padding-top: 50px; }
	#topo #banner h3 { font-size: 20px; }
	/******************* Atribuições Topo ***********************/

	/************************ Conteúdo **************************/
	br.mobile { display:block; }
	
	section#servicos {
		display: block;
		padding: 40px 0;
	}

	section#servicos h1 { font-size: 25px; }
	section#servicos #boxes {
		display: block;
		margin-top: 30px;
	}

	section#servicos #boxes .box { 
		height: 350px;
		margin-bottom: 20px;
		width: 100%;
	}

	section#servicos #botao {
		margin-top: 10px;
		width: 280px;
	}


	#experiencia { padding: 60px 0; }

	#experiencia #txt {
		float: none;
		width: 100%;
	}

	#experiencia #txt h5 { font-size: 25px; }
	#experiencia #txt h6 { font-size: 25px; }
	#experiencia #txt img#linha { width: 100% }

	#experiencia #txt #botao {
		float: none;
		width: 100%;
	}

	#clientes #botao { width: 100%; }
	/************************ Conteúdo **************************/

	/******************* Atribuições Footer *********************/
	footer#rodape #informacoes {
		padding: 40px 0 20px;
		text-align: center;
	}
	footer#rodape #informacoes #logo-footer { float: none; }

	footer#rodape #informacoes span {
		float: none;
		width: 100%
	}
	/******************* Atribuições Footer *********************/
	
	/******************* Atribuições Gerais *********************/
	.pagina { padding-top: 50px; }
	header#titulo { padding: 20px 0; }
	header#titulo h1 { font-size: 30px; }
	header#titulo img { margin: 15px 0; }
	/******************* Atribuições Gerais *********************/


	/*************************** Sobre **************************/
	article#intro { padding: 30px 0 30px; }
	article#intro #imagem { display: none; }

	article#intro #texto {
		float: none;
		text-align: justify;
		width: 100%;
	}

	#topicos section.topico {
		float: none;
		margin: 50px 0 0 0;
		font-size: 15px;
		width: 100%;
	}

	#imagens { 
		margin-top: 75px;
	}
	/*************************** Sobre **************************/

	/************************* Serviços *************************/
	#servicos-interna { 
		display: flex;
		flex-direction: column;
		padding: 40px 0 60px;
	}

	#servicos-interna .direita {
		float: left;
		text-align: left;
	}

	#servicos-interna section.servico {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		height: auto;
		padding: 0;
	}

	#servicos-interna section.servico .img {
		float: none; 
		width: 100%;
	}

	#servicos-interna section.servico .texto {
		text-align: justify;
		padding: 30px 0;
		width: 100%;
	}

	#servicos-interna section.servico .texto h2 {
		font-size: 20px;
		margin: 20px 0;
	}
	/************************* Serviços *************************/

	/************************** Cases ***************************/
	p#intro-cases {
		padding: 40px 0;
		text-align: justify;
	}

	#cases .case {
		margin: 0 0 30px 0;
	    height: 320px;
	    width: 100%;
	}

	#cases .case h2 { padding: 15px 0 0 19px; }
	/************************** Cases ***************************/

	/*************************** Case ***************************/
	article#case-cliente { padding: 40px 0; }
	article#case-cliente #imagens-case { 
		float: none;
		width: 100%;
	}
	article#case-cliente #imagens-case img { max-width: 100%; }
	article#case-cliente #texto { text-align: justify;}
	/*************************** Case ***************************/

	/************************* Contato **************************/
	#pagina-contato { padding: 40px 0; }

	#pagina-contato form#envia-contato {
		float: none;
		width: 100%; 
	}

	#contatos {
		margin-top: 100px;
		float: none;
		text-align: left;
		width: 100%; 
	}

	#nossos-servicos {
		height: unset;
		overflow: hidden;
	}

	#nossos-servicos .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}

	#nossos-servicos .image {
		bottom: -20px;
		height: 100%;
		left: -150px;
		margin-top: 30px;
	    position: relative;
		right: unset;
	    width: 100%;
	}

	.pg-servico .services-detail .content {
		flex-direction: column;
	}

	.pg-servico .services-detail .content img {
		height: 400px;
	}

	.pg-servico .service-video .conteudo .banner-item {
		height: 400px;
	}

	#c-marcas .item {
		text-align: center;
		min-height: 85px;
		display: block;
		align-items: unset;
	}

	#imagens .imagem {
		width: 100%;
	}

	#servicos-mobile .btn-services {
		position: relative;
		top: -50px;
	}

	header#navbar .header-link:after {
		display: none;
	}

	.pg-servico .service-video .conteudo .banner-item .icon {
		height: 60px;
		width: 60px;
	}

	.pg-servico .services-detail .content .text {
		width: 100%;
	}

	.pg-servico .services-detail .content img {
		width: 100%;
	}

	iframe { height: 300px; }
	/************************* Contato **************************/

}

@media only screen and (max-width: 1200px) {

	header#navbar {
		padding: 25px 0px 15px;
	}

	header#navbar .logo {
		padding-bottom: 0px;
	}

	section.banner-section {
		padding-top: 91px;
		height: calc(100vh - 91px);
	}

	section.banner-section .banner .text {
		width: 60%;
	}

	footer .footer-flex {
		padding: 40px 0;
		flex-direction: column;
		gap: 30px;
	}

	footer .footer-flex .links {
		flex-direction: column;
	}

	footer .footer-links {
		justify-content: center;
		gap: 30px;
	}
}

@media only screen and (max-width: 768px) {

	section.banner-section .banner .text {
		width: 80%;
	}

	section.banner-section .banner .text h1 {
		font-size: 32px;
		line-height: 50px;
	}

	footer .footer-flex {
		align-items: start;
	}

	footer .footer-links {
		align-items: start;
		justify-content: start;
		gap: 20px;
		flex-direction: column;
	}

	footer .footer-flex .links {
		align-items: start;
		justify-content: start;
	}

	#cookies-warning {
		padding-bottom: 20px;
		padding-top: 20px;
   }
	#cookies-warning .conteudo {
		flex-direction: column;
		align-items: flex-start;
   }
	#cookies-warning .conteudo .actions {
		align-self: flex-end;
		display: flex;
		align-items: center;
   }
	#cookies-warning .conteudo .actions .btn-accept-cookie {
		margin-right: 0;
		margin-left: 30px;
   }
	#cookies-warning .content {
		width: 50%;
   }
	#cookies-warning .content .icon {
		margin-right: 20px;
   }
}

@media only screen and (max-width: 425px) {

	section.banner-section .banner .text h1 {
		font-size: 28px;
		line-height: 40px;
	}

	section.banner-section .banner .text {
		width: 100%;
	}

	#cookies-warning .content {
		width: 100%;
		margin-bottom: 20px;
   }
	#cookies-warning .actions {
		align-self: center;
   }
}