/*
pag 2
*/
#pag2 {
	display: none;
	padding: 0 2.5%;
	padding-top: 40px;
	position: relative;
	
}

.titPrincipal {
	text-align: center;
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
	color: #828282;
}
/*
	menu pesquisas
*/

#mostraMenuPesquisas {
	display: none;
}

#menuPesquisas {
	font-size: 1.1em;
    display: inline-block;
    width: 17%;
    background-color: #757575;
    box-shadow: 1px 4px 15px 0px rgba(0,0,0,0.75);
    margin-bottom: 30px;
}

.h1Pesquisa {
	text-align: center;
	margin: 0;
	padding: 30px 0;
	font-family: 'Josefin Sans', sans-serif;
	background-color: #474747;
	color: #c9c7c7;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
}

.h2Pesquisa {
	font-size: 1.3em;
	font-family: 'Josefin Sans', sans-serif;
	padding: 10px 0; 
	color: #c9c7c7;
	text-align: center;
	margin: 30px 0;
}

.h2Pesquisa:first-of-type {
	margin-top: 50px;
}


/*
form pesquisa produtos
*/

#formPesquisaProdutos p  {
	text-align: center;
	margin: 25px 0;
}

#formPesquisaProdutos p:first-of-type {
	margin-top: 10%;
}

#formPesquisaProdutos p:last-of-type {
	margin-top: 10%;
	margin-bottom: 0;
}


#formPesquisaProdutos p select {
	cursor: pointer;
	background-color: rgb(70, 70 ,70);
	padding: 15px 20px;
	color: #e2e2e2;
	font-size: 1.1em;
	border-radius: 3px;
	width: 80%; 
}

#formPesquisaProdutos p select:focus {
	outline: none;
}

#formPesquisaProdutos p input[type=submit] {
	width: 70%;
	font-size: 1.1em;
	background-color: rgb(70, 70 ,70);
	border: 1px solid #ccc;
	padding: 10px 0;
	color: #848484;
	border-radius: 4px;
	cursor: pointer;
}

#formPesquisaProdutos p input[type=submit]:hover {
	color: #e2e2e2;
	border: 1px solid #e2e2e2;
	background-color: #2d2d2d;
}

#formPesquisaProdutos p input[type=submit]:focus {
	outline: none;
}



#borda {
	margin: 40px auto;
	width: 80%;
	height: 1px;
	background-color: #999999;
}
/*
div Nome Cat
*/

#divNomeCat {
	/*width: 90%;*/
	border-top: 1px solid gray;
	margin: 0 auto;

}

.divCatPrincipal {
	position: relative
}

.divCatPrincipal h2 {
	position: relative;
	font-size: 1.4em;
	background-color: #474747;
	margin: 0;
	padding: 10px;
	color: #c9c7c7;
    box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
}

.divCatPrincipal h2 .catPrincipalTit {
	cursor: pointer;
}

.divCatPrincipal h2 .catPrinSinais {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
}

/*.divCatPrincipal .sinais {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
}*/

.catPrinSinais .sinalMenos {
	display: none;
}



.divCatSecundaria {
	display: none;
}

.divCatSecundaria p {
	width: 90%;
	margin: 0 auto; 
	padding: 15px 0;
	color: #c1c1c1;
	border-bottom: 1px solid #999999;
	cursor: pointer;
}

.divCatSecundaria p:last-of-type {
	border-bottom: none;
}




/*
div mostra pesquisas
*/

#divMostraPesquisa {
	width: 77.5%;
    display: inline-block;
    margin-left: 5%;
    vertical-align: top;
}



/*
div product
*/
#divProduct {
	position: relative;
}

#divProduct h2 {
	border-bottom: 2px solid #999999;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.1em;
    margin: 0 auto;
    padding-bottom: 15px;
    margin-top: 5%;
    width: 90%;
}


#produtosErroPesquisa {
	display: none;
	font-size: 1.5em;
	text-indent: 5%;
}


/*
produtos Procurados 
*/

.produtosProcurados {
	cursor: pointer;
	width: 25%;
    margin: 5% 4%;
    margin-bottom: 0;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
    background-color: #fff;
}

.produtosProcurados img {
	width: 100%;
}

.produtosProcurados h3 {
	font-family: 'Josefin Sans', sans-serif;
	padding-bottom: 40px;
}


/*
mostra mais
*/
#mostra_mais {
	text-align: center;
	margin-top: 6%;
}

#mostra_mais span {
	width: 70%;
	font-size: 1.1em;
	background-color: rgb(70, 70 ,70);
	border: 1px solid #ccc;
	padding: 10px 15px;
	color: #848484;
	border-radius: 4px;
	cursor: pointer;
}

#mostra_mais span:hover {
	color: #e2e2e2;
	border: 1px solid #e2e2e2;
	background-color: #2d2d2d;
}



/*
div produto individual
*/

/* fecha produto individual */
#fechaProduto {
	font-size: 1.2em;
	cursor: pointer;
}


#divProdutoIndividual {
	position: relative;
	display: none;
	margin-top: 20px;
}

#divFotosProduto {
	text-align: center;
}

#divFotoPrincipal {
	position: relative;
}

#imgPrincipal {
	width: 70%;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
}


#divFotosSecundarias {
	position: absolute;
	top: 0;
	left: 10px;
	width: 150px;
	background-color: #fff;
}

.fotosSecundarias {
	width: 150px;
	height: 107px;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
}



/* div borda */
.divBorda {
	width: 90%;
	height: 2px;
	margin: 5% auto; 
	background-color: #666666;
}

/* miniaturas */
#divMiniaturas {
	width: 90%;
	margin: 0 auto;
	padding: 5px;
	background-color: #fff;
	box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.75);
}

#divMiniaturas img {
	margin-right: 3%;
	vertical-align: middle;
}

#divMiniaturas img:last-of-type {
	margin: 0;
}



/* informacoes do produto */
#infoProduto {
	margin: 5% 0; 
}

#infoProduto h2 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 2em;
	color: #514d4d;
	margin-bottom: 30px;
}

#infoGrafico p {
	font-size: 1.2em;
	position: relative;
	background: linear-gradient(
		    to right, 
		    #474747 0%, 
		    #474747 50%, 
		    #757575 50%, 
		    #757575 100%
	);
	border-right: 7px solid #474747;
	width: 60%;
	margin: 0 auto;
}

#infoGrafico p:first-of-type {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

#infoGrafico p:last-of-type  {
   	border-bottom-right-radius: 5px;
   	border-bottom-left-radius: 5px;
}	


.grafico {
	display: inline-block;
	border-bottom: 1px solid #282828;
	padding: 15px;
}

#infoGrafico p:last-of-type .grafico {
	border-bottom: none;
}


.graficoTipo {
    width: 50%;
    color: #c9c7c7; 
}

.graficoValor {
	width: 50%;
}


/*
informacoes tecnicas
*/

#quadroInfoTecnica {
	background-color: #757575;
	color: #b7b7b7;
	width: 60%;
	margin: 5% auto; 
	box-shadow: 0px 0px 22px 3px rgba(0,0,0,0.75)
}

#quadroInfoTecnica h2 {
	margin: 0;
	background-color: #474747;
	color: #c9c7c7;
	padding: 15px 0;
	box-shadow: 0px 4px 15px 0px rgba(0,0,0,0.75);
}

#quadroInfoTecnica p {
	width: 90%;
	margin: 0 auto;
	border-bottom: 2px solid #666666;
	padding: 15px 0;
}

#quadroInfoTecnica p:last-of-type {
	border-bottom: none;
}



/*
total de resultados
*/
#totalResultados {
	margin-top: 4%;
}
#totalResultados p {
	text-align: right;
    border-top: 2px solid #999999;
    padding: 15px 0 50px 0;
    padding-top: 15px;
    padding-bottom: 50px;
    margin-bottom: 0;
    font-size: 1.1em; 
}

/* loading mostra mais */
#loadingMostraMais {
	display: none;
	padding: 10%;
}


/*
loading produto
*/
#loadingProduto {
	display: none;
	padding: 10%;
}

.sk-circle {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



/*
	\\ MEDIA QUERIES//
*/ 

/* smartphone */
@media only screen and (max-width: 665px) {
	#pag2 {
		padding: 0 0 10% 0;
	}

	#mostraMenuPesquisas {
		position: relative;
		width: 100%;
		display: block;
		background-color: #ccc;
		padding: 10px 3%;
		background-color: #757575;
		box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
	}

	#mostraMenuPesquisas span {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3%;
	}

	#pesquisasEsconde {
		display: none;
	}


	#menuPesquisas {
		display: none;
		width: 100%;
		margin-bottom: 0;
	}

	#menuPesquisas h1 {
		display: none;
	}

	#formPesquisaProdutos h2 {
		margin: 0;
	}

	#formPesquisaProdutos p {
		margin: 0;
	}
	#formPesquisaProdutos p:first-of-type {
		margin-top: 0;
	}
	#formPesquisaProdutos p:last-of-type {
		margin-top: 20px;
	}

	#formPesquisaProdutos p input[type=submit] {
		font-size: 1em;
		width: 80%;
	}

	.h2Pesquisa {
		font-size: 1.2em;
		padding: 15px 0;
	}

	#borda {
		margin: 15px auto;
	}

	.divCatPrincipal h2 {
		font-size: 1.2em;
		background-color: #757575;
	}

	.divCatSecundaria p {
		width: 80%;
	}


	/* 
	div mostra pesquisas
	*/

	#divMostraPesquisa {
		width: 80%;
		display: block;
		margin: 10% auto;
		margin-bottom: 0;	
	}

	.titPrincipal {
		font-size: 1.3em;
		line-height: 1.1em;
		margin-top: 10%;
		margin-bottom: 10%;
	}


	/* div product */
	#divProduct h2 {
		font-size: 1.2em;
		line-height: 1.2em;
		width: 100%;
	}

	.produtosProcurados {
		display: block;
		width: 90%;
		margin: 10% auto;
	}

	#totalResultados p {
		width: 90%;
		margin: 10% auto; 
		margin-bottom: 0;
		font-size: 1em;
	}

	#mostra_mais {
		margin-top: 15%;
	}

	
	#produtosErroPesquisa {
		font-size: 1em;
	}

	/*
	produto individual 
	*/
	#divProdutoIndividual {
		margin: 0 auto;
		width: 90%;
	}

	#divFotoPrincipal {
		width: 100%;
		margin: 0 auto;
	}

	#imgPrincipal {
		width: 100%;
	}


	#divFotosSecundarias {
		position: relative;
		width: 100%;
		background-color: transparent;
		left: 0;
	}

	.fotosSecundarias {
		width: 40%;
		height: 100px;
		margin-top: 5%;
		margin-right: 5%;
	}

	.fotosSecundarias:nth-child(even) {
		margin-right: 0;
	}


	/*
	informacoes produto individual
	*/

	#infoProduto h2 {
		margin-top: 20%;
		font-size: 1.4em;
	}

	
	#infoGrafico p {
		font-size: .9em;
		width: 100%;
	}

	.grafico {
		padding: 15px 5px;
	}

	.graficoTipo {
		width: 50%;
	}

	.graficoValor {
		width: 50%;
	}


	/* informacoes tecnicas */

	#quadroInfoTecnica {
		width: 100%;
		margin: 10% auto;
		margin-bottom: 0;
	}


}



/* tablet */

@media only screen and (min-width: 666px) and (max-width: 1100px) {
	#pag2 {
		padding: 0 0 10% 0;
	}

	#mostraMenuPesquisas {
		position: relative;
		width: 100%;
		display: block;
		background-color: #ccc;
		padding: 10px 3%;
		background-color: #757575;
		box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
	}

	#mostraMenuPesquisas span {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 3%;
	}

	#pesquisasEsconde {
		display: none;
	}


	#menuPesquisas {
		display: none;
		width: 100%;
		margin-bottom: 0;
	}

	#menuPesquisas h1 {
		display: none;
	}

	#formPesquisaProdutos h2 {
		margin: 0;
	}

	#formPesquisaProdutos p {
		margin: 0;
	}
	#formPesquisaProdutos p:first-of-type {
		margin-top: 0;
	}
	#formPesquisaProdutos p:last-of-type {
		margin-top: 20px;
	}

	#formPesquisaProdutos p input[type=submit] {
		font-size: 1em;
		width: 80%;
	}

	.h2Pesquisa {
		font-size: 1.2em;
		padding: 15px 0;
	}

	#borda {
		margin: 15px auto;
	}

	.divCatPrincipal h2 {
		font-size: 1.2em;
		background-color: #757575;
	}

	.divCatSecundaria p {
		width: 80%;
	}


	/* 
	div mostra pesquisas
	*/

	#divMostraPesquisa {
		width: 80%;
		display: block;
		margin: 10% auto;
		margin-bottom: 0;	
	}

	.titPrincipal {
		font-size: 1.3em;
		line-height: 1.1em;
		margin-top: 10%;
		margin-bottom: 10%;
	}


	/* div product */
	#divProduct h2 {
		font-size: 1.2em;
		line-height: 1.2em;
		width: 100%;
	}

	.produtosProcurados {
		display: block;
		width: 65%;
		margin: 10% auto;
	}

	#totalResultados p {
		width: 90%;
		margin: 10% auto; 
		margin-bottom: 0;
		font-size: 1em;
	}

	#mostra_mais {
		margin-top: 15%;
	}


	#produtosErroPesquisa {
		font-size: 1.1em;
	}
	/*
	produto individual 
	*/
	#divProdutoIndividual {
		margin: 0 auto;
		width: 90%;
	}

	#divFotoPrincipal {
		width: 100%;
		margin: 0 auto;
	}

	#imgPrincipal {
		width: 100%;
	}


	#divFotosSecundarias {
		position: relative;
		width: 100%;
		background-color: transparent;
		left: 0;
	}

	.fotosSecundarias {
		width: 40%;
		height: 100px;
		margin-top: 5%;
		margin-right: 5%;
	}

	.fotosSecundarias:nth-child(even) {
		margin-right: 0;
	}


	/*
	informacoes produto individual
	*/
	#divFotosSecundarias {
		width: 70%;
		margin: 0 auto;
	}



	#infoProduto h2 {
		margin-top: 20%;
		font-size: 1.4em;
	}

	
	#infoGrafico p {
		font-size: .9em;
		width: 100%;
	}

	.grafico {
		padding: 15px 5px;
	}

	.graficoTipo {
		width: 50%;
	}

	.graficoValor {
		width: 50%;
	}


	/* informacoes tecnicas */

	#quadroInfoTecnica {
		width: 100%;
		margin: 10% auto;
		margin-bottom: 0;
	}


}



/* portatil */ 
@media only screen and (min-width: 1101px) and (max-width: 1600px) {

	/* menu pesquisas */
	#menuPesquisas {
		width: 20%;
	}



	/* mostra pesquisa */
	#divMostraPesquisa {
		width: 70%;
		margin-left: 8%;
	}

	/* imagens produto individual */

	#imgPrincipal {
		width: 90%;
		max-width: 100%;
	}


	#divFotosSecundarias {
		position: relative;
		width: 50%;
		margin: 0 auto;
		background-color: transparent;
		left: 0;
	}

	.fotosSecundarias {
		width: 32%;
		margin-top: 5%;
		margin-right: 5%;
	}

	.fotosSecundarias:nth-child(even) {
		margin-right: 0;
	}


}


