@charset "UTF-8";

/* CSS - Starcar | Codificado por: Ueek Agência Digital | Ano: 2019 */

/*Notebooks*/
@media only screen and (max-width:1366px) {
	section#institucional { background-position: 500px 196px; }
	section#contate-nos { background-position: 500px 0; }
}

/* Tablets até 1200 */
@media only screen and (max-width:1200px) {
	
	.conteudo { width: 95%; }

	/******************** Atribuições Topo **********************/
	header#topo nav#menu { margin-left: 6%; }
	header#topo nav#redes ul li { margin-left: 15px; }
	/******************** Atribuições Topo **********************/


	/************************ Conteúdo **************************/
	/*Fullbanner*/
	#fullbanner .item-banner { padding-top: 20%; }

	/*Barra Contatos*/
	#barra-contatos ul li {
	    font-size: 14px;
	    margin-right: 30px;
	}

	#barra-contatos ul li i { margin-right: 9px; }

	/*Institucional*/
	section#institucional #marcas { background-size: 170%!important; }
	section#servicos #itens { width: 650px; }
	.item { margin: 0 12px 80px; }

	/*Peças*/
	section#pecas img#menina { margin: -62px 130px 0 0; }

	/*Blog*/
	section#blog #posts .post.maior, .post { width: 285px !important; }
	/************************ Conteúdo **************************/


	/******************* Atribuições Footer *********************/
	footer#rodape nav#menu { margin-left: 143px; }
	/******************* Atribuições Footer *********************/

	#galeria .thumb { height: 233px; }

	/*Empresa*/
	#empresa-interna #marcas #container-marcas { background-size: 160% !important; }

	/*Serviços*/
	#servicos-interna { padding: 60px 0; }
	#servicos-interna #titulo { margin: 0 9px; }
	#servicos-interna .item { margin: 0 9px 80px; }

	/*Peças*/
	#barra-busca form#busca h5, #barra-busca form#busca .select-style { margin-right: 50px; }

	#container-produtos aside { width: 230px; }

	#container-produtos #lista-produtos, #produto { width: 710px; }

	.produto {
	    margin: 0 10px 20px;
	    width: 216px;
	}

	/*Produto*/
	#produto  { margin: 75px 0; }
	#produto #dados-produto { width: 310px; }

	#produto #dados-produto h1 {
		color: #0279CB;
		font-size: 20px;
		letter-spacing: 1px;
		margin-bottom: 29px;
	}

	#produto #dados-produto p { line-height: 27px; }

	#produto #dados-produto ul#info {
		color: #0279CB;
		font-size: 15px;
		letter-spacing: 1px;
		margin-top: 47px;
		text-transform: uppercase;
	}

	#produto #dados-produto ul#info li {
		list-style: none;
		margin-bottom: 15px;
	}

	#produto #dados-produto button.blue {
		margin-top: 15px;
		height: 68px;
		width: 249px;
	}

	#produto #dados-produto nav#redes { margin-top: 24px; }

	#produto #dados-produto nav#redes ul li {
		border: 1px solid #0279CB;
		border-radius: 30px;
		color: #0279CB;
		display: block;
		float: left;
		font-size: 13px;
		height: 30px;
		line-height: 30px;
		list-style: none;
		margin-right: 16px;
		text-align: center;
		width: 30px;
	}

	#produto #dados-produto nav#redes ul li:hover {
		border: 1px solid #004677;
		color: #004677;
	}

	#produto #dados-produto span#ref  {
		color: #919191;
		display: block;
		font-size: 12px;
		letter-spacing: 1px;
		margin-top: 15px;
	}

	#produto #galeria-produto  { margin: 46px 0 55px ;}

	#produto #galeria-produto .thumb  {
		background: #ccc;
		float: left;
		margin: 0 10px;
		height: 138px;
		width: 143px;
	}

	#relacionados h2 {
		display: block;
		font-size: 30px;
		margin-bottom: 50px;
	}

}

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

	.conteudo {
		padding: 0 20px;
		width: 100% !important;
	}

	header#topo { padding: 20px 50px; }

	header#topo nav#menu {
		display: block;
	    clear: both;
	    float: none;
	    margin-left: 0;
	    width: 100%;
	}

	header#topo nav#menu ul {
		margin: 0 auto;
		width: 530px;
	}

	header#topo nav#menu ul li {
		line-height: 50px;
		margin: 0 17px;
	}

	header#topo nav#redes {
	    position: absolute;
	    right: 55px;
	    top: 20px;
	}

	#fullbanner .item-banner { padding-top: 30%; }

	#fullbanner .botoes { width: 100%; }
	#fullbanner button.blue, #fullbanner button.border { width: 39%; }

	section#institucional { background-image: none; }

	#barra-contatos {
	    height: auto;
	    line-height: 35px;
	    padding: 20px 50px;
	}

	#barra-contatos ul li { float: none; }

	section#institucional article,
	section#servicos #txt,
	section#pecas,
	section#blog {
	    float: none;
	    padding: 0 35px;
	    width: 100%;
	}

	section#servicos button.blue { margin-top: 70px; }

	section#servicos #itens {
	    float: none;
	    margin-top: 80px;
	    padding: 0 35px;
	    width: 100%;
	}

	#servicos-interna { padding: 60px 35px; }


	#servicos-interna #titulo {
	    float: none;
	    margin: 0 0 55px 0 !important;
	    width: 100% !important;
	}

	.item {
	    float: none;
	    margin: 30px 0;
	    padding-left: 105px;
	    width: 100%;
	}

	section#pecas img#menina {
	    margin: 250px 0 0 0;
	    width: 215px;
	}

	section#blog { padding: 50px 35px; }

	section#blog #posts { padding-top: 40px; }

	section#blog #posts .post.maior, .post, section#blog #posts .post {
	    margin: 20px 0 !important;
	    width: 100% !important;
	}

	section#contate-nos { background-image: none; }
	section#contate-nos form#envia-contato {
	    float: none;
	    padding: 70px 35px;
	    width: 100%;
	}


	/*Rodapé*/
	footer#rodape {
	    padding: 40px 0;
	    text-align: center;
	}

	footer#rodape img#logo-footer {
	    float: none;
	    margin-top: 0;
	}

	footer#rodape nav#menu {
	    float: none;
	    margin-left: 0 !important;
	    padding: 30px 170px;
	    width: 100%;
	}

	footer#rodape nav#menu ul.bloco {
	    margin-right: 0;
	    width: 50%;
	}

	#empresa-interna article h1, .texto-duas-colunas { padding: 0 35px; }

	header#topo-pagina {
	    padding: 160px 35px;
	    height: 382px;
	}

	#barra-busca { padding: 58px 60px; }

	#barra-busca form#busca h5, #barra-busca form#busca .select-style { 
		margin-bottom: 20px;
		margin-right: 0;
		width: 100%;
	}

	#barra-busca form#busca input[type="submit"] {
		margin-top: 30px;
	    width: 100%;
	}

	#container-produtos { padding: 70px 35px; }

	#container-produtos aside {
	    float: none;
	    cursor: pointer;
	    height: 95px;
	    padding: 35px;
	    overflow: hidden;
	    width: 100%;
	}

	#container-produtos #lista-produtos, #produto {
	    margin-top: 50px;
	    width: 100%;
	}

	.produto {
	    margin: 0 0 50px;
	    width: 100%;
	}

	#produto #thumb-maior {
		float: none;
		width: 100%;
	}

	#produto #dados-produto {
	    float: none;
	    margin-top: 50px;
	    width: 100%;
	}

	article#publicacao {
	    padding: 68px 35px;
	}

}

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

	/* ------ Estrutura Geral e Home ------ */
	body { overflow-x: hidden; }
		
	#open-menu {
	    display: block;
	    float: right;
	    font-size: 22px;
	    margin-top: 28px;
	}

	#close-menu:hover, #open-menu:hover { opacity: 0.8; }

	header#topo nav#redes { display: none; }
	
	header#topo nav#menu {
		background: linear-gradient(90deg, #0272C1 0%, #004677 100%);
		color: #fff;
		display: none;
		float: none;
		height: 100%;
		margin-left: 0;
		position: fixed;
		text-transform: uppercase;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10;
	}

	header#topo nav#menu #close-menu {
		display: block;
		cursor: pointer;
		float: right;
	    font-size: 22px;
	    margin: 28px 35px;
	}

	header#topo nav#menu ul {
		clear: both;
		width: 100%;
	} 

	header#topo nav#menu ul li {
		float: none;
		font-size: 16px;
		list-style: none;
		letter-spacing: 1px;
		line-height: 60px;
		margin: 0 !important;
		text-align: center;
		width: 100%;
	}

	header#topo nav#menu ul li a { color: #fff; }

	header#topo nav#menu ul li a:hover, header#topo nav#menu ul li a.ativo {
		color: #004677;
		text-decoration: underline;
	}

	#fullbanner .item-banner .botoes { width: 100%; }

	footer#rodape nav#menu { padding: 0; }

	.texto-duas-colunas {
	    column-count: 1;
	    column-gap: 100px;
	}

}

/** iPhone 6/7/8 Plus **/
@media only screen and (max-width: 414px) {
	#fullbanner .item-banner { padding-top: 68%; }
}


/** iPhone 5 e SE **/
@media only screen and (max-width: 320px) {

	header#topo { padding: 20px 15px; }
	#fullbanner .item-banner { padding-top: 48%; }

}