@charset "utf-8";
/* 	CSS Document  
	Site...........: Caye PEdras - www.cayepedras.com.br
	Data inicio....: 07/11/2016 16:21h
	Autor..........: Anderson Caye
	Descrição......: Folha default do site Caye Pedras.
	Responsividade.: 1280px / 1024px / 960px / 768px / 480px / 320px
	Auditado.......: --/--/-- --:--h
*/
/*Definição Geral*/
.container{width: 94%; float: left; text-align: center; padding: 3%; margin: 3%; border-radius: 15px; background-color: #FFF;}
.container h2{text-align: left; width: 100%; background-color: #f5f5f5; border-radius: 5px; padding: 15px; margin-bottom: 2%; font-size: 1.5em; color: #333366;}



/* A Empresa*/
.text{ text-align: justify; margin-bottom: 2%; float: left; width: 100%; display: block;}
.text p{ margin-bottom: 0; line-height: 1.5; margin-bottom: 5%;}
.log{width: 100%; float: left;}
.log img{width: 100%; max-width: 200px;}
.aerea{width: 100%; text-align: center;}
.aerea img{ width: 100%; max-width: 600px; }
@media screen and (min-width: 480px){
	.log {margin-bottom: 2%;}
}
@media screen and (min-width: 768px){
	.text {padding: 0 3%;}
}
@media screen and (min-width: 960px){
	.log{ width: 30%; margin-top: 3%; }
	.text{ width: 70%; }
}
@media screen and (min-width: 1024px){
	.text {padding-right: 7%;}

}
@media screen and (min-width: 1280px){
}

/* Contato */
.cont-endereco{ width: 100%; float: left; }
.endereco-sec{width: 100%; text-align: left; }
.icon-loca{width: 10%; float: left; text-align: center; line-height: 54px;}
.endereco{ width: 90%; font-size: 0.9em; float: left; border-bottom: 1px dashed #f7f7f7; margin-bottom: 3%; padding-bottom: 2%;}
.icon-fone{width: 10%; float: left; text-align: center; line-height: 0.9em;}
.fone{ width: 90%; font-size: 0.9em; float: left; border-bottom: 1px dashed #f7f7f7; margin-bottom: 3%; padding-bottom: 2%;}
.icon-email{width: 10%; float: left; text-align: center; line-height: 0.9em;}
.email{ width: 90%; font-size: 0.9em; float: left; border-bottom: 1px dashed #f7f7f7; margin-bottom: 3%; padding-bottom: 2%;}
.logo-contato{ display: none;}

.contato{ width: 100%; padding: 1%; margin-top: 2%;}
.contato input{ width: 96%; margin: 1% 2%; padding: 3%; border-radius: 2px; border: 1px solid #333366; opacity: 0.6;}
.contato textarea{ width: 96%; margin: 1% 2%; padding: 3%; border-radius: 2px; border: 1px solid #333366; opacity: 0.6;}
.contato select{ width: 96%;  margin: 1% 2%; padding: 3%; border-radius: 2px; border: 1px solid #333366; opacity: 0.6;}
.contatoMsg{ width: 96%; height: 200px; margin: 1% 2%; padding: 3%; }
.btn-contato{width: 96%;  margin: 1% 2%; padding: 3%; cursor: pointer; background-color: #333366; color: #fff; border-radius: 2px; margin-bottom: 20px;}
.btn-contato:hover{background-color: #333366; color: #fff; opacity: 0.7; }
@media screen and (min-width: 480px){

}
@media screen and (min-width: 768px){
	.contato input{ padding: 1.5%; }
	.contato textarea{ padding: 1.5%; }
	.contato select{ padding: 1.5%; }
	.endereco-sec p{ font-size: 1em; }
}
@media screen and (min-width: 960px){
	.cont-endereco{ width: 40%; }
	.contato{ float: right; width: 60%; }
	.logo-contato{ display: block !important; width: 100%; max-width: 250px;}
	.logo-contato img{ padding-top: 20%; padding-left: 20%; }
}
@media screen and (min-width: 1024px){

}
@media screen and (min-width: 1280px){

}

/* Localização */
.mapa{ width: 100% ; height: 400px; }
.container h3{ font-size: 1.2em; line-height: 20px; font-weight: bold;}
.container span{ color: #333366; font-weight: bold; font-size: 1.5em; }
.container h4{ font-size: 0.9em; line-height: 30px;}

.endereco-sec-loca{width: 100%; text-align: left; }
.icon-loca-loca{width: 15%; float: left; text-align: center; line-height: 54px; font-size: 2em;}
.endereco-loca{ width: 85%; font-size: 0.9em; font-weight: bold; float: left; border-bottom: 1px dashed #f7f7f7; margin-bottom: 3%; padding-bottom: 2%;}
/*
.endereco-sec-loca{width: 100%; text-align: left; }
.icon-loca-loca{width: 10%; float: left; text-align: center; line-height: 78px; font-size: 3em;}
.endereco-loca{ width: 90%; font-size: 1.3em; font-weight: bold; float: left; border-bottom: 1px dashed #f7f7f7; margin-bottom: 3%; padding-bottom: 2%;}
*/

@media screen and (min-width: 480px){
	.container h4{ font-size: 1em;}
	.endereco-loca{ font-size: 1em; }
	.icon-loca-loca{ font-size: 2.5em; line-height: 60px; }
}
@media screen and (min-width: 768px){
	.container h4{ margin-bottom: 3%;}
	.
}
@media screen and (min-width: 960px){

}
@media screen and (min-width: 1024px){

}
@media screen and (min-width: 1280px){
	
}

/* Produtos */
.open{ width: 100%; margin-bottom: 1%; border-radius: 2px; padding: 3% 0; padding-left: 3%; background-color: #006; color: #f1f1f1; cursor: pointer; text-align: left;}
.open:hover{ background-color: #CCC; color: #006 }
.open i{ margin-right: 10px;}

.close{ display: none; width: 100%; margin-bottom: 1%; border-radius: 2px; padding: 3% 0; padding-left: 3%; background-color: #006; color: #f1f1f1; cursor: pointer; text-align: left;}
.close:hover{ background-color: #CCC; color: #006 }
.close i{ margin-right: 10px;}

.categoriaProdutos{ display: none; width: 100%; background-color: #f7f7f7; border-radius: 5px;}
.categoriaProdutos ul li span{ display: none; }
.categoriaProdutos ul{ width: 100%; }
.categoriaProdutos ul li{ line-height: 20px; }
.categoriaProdutos ul li a{ width: 100%; display: block; padding: 2% 0;}
.categoriaProdutos ul li a:hover{ background-color: #006; border-radius: 5px; color: #fff; font-weight: bold;}

.grade{ width: 100%; float: left;}
.prod{ display: block; text-align: center; margin-top: 20px; border: 1px solid #f1f1f1; padding: 2%; border-radius: 7px;}
.prod img{ width: 200px; height: 286px; border-radius: 3px; cursor: pointer; float: none; object-fit: cover; object-position: center;}
.prod img:hover{ opacity: 0.8; }
.prod a{ color: #333366; font-weight: bold; margin: 0;}
.prod a:hover{ color: #006;}
.prod h4{ color: #333366; margin: 0; }
.prod p{ color: #CCC; margin: 0; }

/*Paginação*/
.paginacao-post{ width: 100%; text-align: center; padding: 2% 0; float: left; margin-bottom: 1%;}
.paginacao-post a{ padding: 1%; background-color: #333366; color: #CCC;}
.paginacao-post a:hover{ background-color: #CCC; color: #333366; font-weight: bold; }
a.s{ background-color: #f5f5f5; color: #333366; font-weight: bold; font-size: 1.2em; }

@media screen and (min-width: 480px){
	.prod{ width: 48%; float: left; margin-left: 1%;}
}
@media screen and (min-width: 768px){
	.prod{ width: 30%; margin-left: 2.5%;}
}
@media screen and (min-width: 960px){
	.categoriaProdutos ul li a{ padding: 5px 0;  }
	.open{ padding: 10px 0; padding-left: 10px;}
	.close{ padding: 10px 0; padding-left: 10px; }
}
@media screen and (min-width: 1024px){
	.prod{ width: 24%; margin-left: 0.5%;}
}
@media screen and (min-width: 1280px){
	
}

/* Notícias */
.news-n{ margin-bottom: 2%;}
.public-n{ margin-bottom: 1%; width: 100%; border: 1px solid #CCC; border-radius: 15px;}
.post-n{ background-color: #fff; width: 100%; padding: 2% 3%; border-radius: 0 0 15px 15px;}
.post-n h2{ color: #333366; margin-bottom: 2%; font-size: 1.2em; font-weight: bold; text-align: center;}
.post-n h2:hover{ margin-bottom: 2%; font-size: 1.3em; color: #000;}
.post-n p{ text-align: center; font-style: italic; line-height: 1.5em;}
.post-cabecalho-n{ width: 100%; }
.post-cabecalho-n img{ border-radius: 15px 15px 0 0; width: 100%; height: 200px; object-fit: cover; object-position: center;}
.post-cabecalho-n img:hover{ opacity: 0.8; cursor: pointer; }

@media screen and (min-width: 480px){
}
@media screen and (min-width: 768px){
	.news-n{width: 98%;}
	.public-n{ width: 99%; float: left;}
	.public-n img{ width: 30%; float: left; margin-right: 1%; border-radius: 10px 0 0 10px;}
	.postcabecalho-n { width: 69%; display: block; float: right;}
	.post-n{ width: 69%;  display: block; float: right;}
	.newsletter-n{margin: 0 auto;}
	.newsletter-n input{width: 45%; margin-left: 20%; padding: 1.5%; font-size: 100%;}
	.newsletter-n button{width: 20%; padding: 1.5%; font-size: 100%;}
}
@media screen and (min-width: 960px){
}
@media screen and (min-width: 1024px){
	
}
@media screen and (min-width: 1280px){
}

/* Postagem Noticias*/
.public-np{ width: 100%; display: block;}
.public-np h5{ font-size: 0.8em; color: #CCC; margin-bottom: 3%; text-align: left; margin-left: 2%; width: 100%;}
.public-np h4{ border-bottom:1px ridge #CCC ; padding-bottom: 1%; font-size: 1.1em; color: #959595; margin-bottom: 3%; text-align: center; margin-left: 2%; width: 100%; font-style: italic; font-weight: normal;}
.public-np h3{}
.public-np p{ text-align: justify; line-height: 1.5em; font-size: 1em; width: 100%; font-style: normal;}
.tag{ padding-top: 7%; }
.public-np img{ margin: 2%; width: 100%; text-align: center;}
.img-extras{ width: 100%; display: block; }
.comentarios{ width: 100%; display: block; float: right;}
.comentarios h3{ margin-top: 3%;}

@media screen and (min-width: 480px){
	.public-np img{ width: 70%; }
}
@media screen and (min-width: 768px){
	.public-np h5{ font-size: 0.8em; color: #CCC; margin-bottom: 3%; text-align: left; margin-left: 2%; }
	.public-np p{ text-align: justify; line-height: 1.5em; font-size: 1em; width: auto;}
	.public-np img{ float: right; margin: 2%; width: 35%;}
	.public-np h4{width: 50%;}
}
@media screen and (min-width: 960px){

}
@media screen and (min-width: 1024px){

}
@media screen and (min-width: 1280px){
	
}

/*Pagina de Produto */
.imagemPrincipal{ width: 100%; }
.imagemPrincipal img { width: 200px; height: auto;}
.textoEimagem{ width: 100%; }
.apresentacao{ width: 100%; text-align: center; }
.apresentacao h4{ font-size: 1em; color: 333366;}
.tagDoProduto{ font-size: 0.7em; margin-bottom: 20px; color: #CCC; font-weight: bold;}
.apresentacao h5{ font-size: 1em; font-style: none; color: #000;}
.imagensExtras{ width: 100%; }

/*Sistema de Comentários*/
.print-sistem{width: 100%; margin: 0 auto; padding: 1%;}
.coments{ 
	width: 100%; 
	margin: 0 auto; 
	padding: 1%; 
	background-color: #fcfcfc;
	border: 0.5px dashed #CCC;
	border-right: none;
	border-left: none;
	text-align: justify;
}
.nome-comentario {font-weight: bold; font-size: 1.2em; }
.texto-comentario { font-size: 1em; }
.data-comentario { font-size: 0.8em; color: #CCC; padding-bottom: 1%;}
.semComentario{font-weight: bold; font-size: 1.2em; text-align: center;}

.sistem-coments{ width: 100%; background-color: #fcfcfc; border-radius: 5px; padding: 5%; margin: 0 auto;}
.sistem-coments input{ width: 100%; border-radius: 5px; border:0.5px solid #CCC; padding: 3%;}
.sistem-coments textarea{ width: 100%; height: 200px; border-radius: 5px; border:0.5px solid #CCC; padding: 3%;}
.sistem-coments button{ width: 100%; padding: 5%; cursor: pointer; background-color: #333366; color: #fff; border-radius: 5px;}
.sistem-coments button:hover{background-color: #333366; color: #fff; opacity: 0.7; }



@media screen and (min-width: 480px){

}
@media screen and (min-width: 768px){
	.sistem-coments{ padding: 2%;}
	.sistem-coments input{ padding: 1%;}
	.sistem-coments textarea{ padding: 1%;}
	.sistem-coments button{ padding: 2% }
}
@media screen and (min-width: 960px){
	.sistem-coments{ width: 768px;}
}
@media screen and (min-width: 1024px){

}
@media screen and (min-width: 1280px){
	
}

/*
@media screen and (min-width: 480px){

}
@media screen and (min-width: 768px){

}
@media screen and (min-width: 960px){

}
@media screen and (min-width: 1024px){

}
@media screen and (min-width: 1280px){
	
}
*/