@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
*/
/* === RESET === */
*{ 	margin: 0; 
	padding: 0; 
	font-size: 100%; 
	border: none; 
	outline: none; 
	font-weight: 300; 
	box-sizing: border-box; /* box-sizing - para quando usar um padding não mudar a dimenção do elemento*/ 
	font-family: 'Ubuntu', sans-serif;
}
body{ background-color: /*#f5f5f5*/#FFF;}
a{ text-decoration: none;}
ul{ list-style: none;}
img{ max-width: 100%;}

/* CABECALHO */
.header{ width: 100%; background-color: }
.logo{width: 50px; height: 50px; float: left; background: url(../img/logo.png) center center/50px no-repeat; font-size: 0; margin: 2%; margin-right: 0;}
/* MENU */
.menu{ background-color: #000; height: 100%; width: 100%; position: fixed; top: 0; left: 0; /*opacity: 0.9;*/ display: none;}
.menu ul{width: 100%; float: left; text-align: center;}
.menu li{padding: 1.5%; margin: 1%;}
.menu li a{ color: #ECE5CE; font-size: 2em; padding: 1.5% 3%;}
.menu li a:hover{ color: #C5E0DC; border: 1px solid #C5E0DC;}
.btn-close{ color: #ECE5CE; margin: 2% 3%; float: right; cursor: pointer; font-size: 1.5em;}
.btn-info{width: 56px; height: 56px; float: right; text-align: center; color: #006; border-radius: 56px; cursor: pointer; background: none;}
.btn-menu{ width: 56px; height: 56px; float: right; text-align: center; color: #006; border-radius: 56px; cursor: pointer; background: none;}
/* info */
.info{ background-color: #000; height: 100%; width: 100%; position: fixed; top: 0; left: 0; display: none;}
.btn-close-info{ color: #ECE5CE; margin: 2% 3%; float: right; cursor: pointer; font-size: 1.5em;}
/*Google Tradutor*/
.traducao{ width: 100%; display: block; position: fixed; text-align: center; margin-top: 15%;}
#google_translate_element {}
.taxa{ width: 100%; background-color: #fff; text-align: center; margin-top: 10%; opacity: 1;}
.tempo{ width: 100%; text-align: center; margin-top: 5%; }

/*Produto Em Destaque */
.apresentacao{width: 94%; float: left; text-align: center; padding: 3%; margin: 0; border-radius: 15px; background-color: #FFF;}
.apresentacao h2{text-align: left; width: 100%; background-color: #f5f5f5; border-radius: 5px; padding: 15px; margin-bottom: 0; font-size: 1.5em; color: #333366;}


.produtoDestaque{ width: 80%; margin: 0 auto; }

/* Vitrine */
/*
.espaco-vit{  padding: 0; display: block; float: left; width: 100%; overflow: auto; margin-bottom: 5%;}
.vitrine{ margin: 0 auto; width: auto; border-radius:5px; padding: 5px; }
.vitrine ul{ margin: 0; padding: 0;}
.vitrine li img{ border-radius: 5px 5px 0 0;}
.vitrine span{ font-size: 0; }
.pag-vitrine{ color: #006; text-align: center; width: 100%;}
.pag-vitrine #pagina{}
.pag-vitrine #antes{ float: left; color: #006; margin-left: 5%;}
.pag-vitrine #antes:hover{ cursor: pointer; opacity: 0.7; }
.pag-vitrine #depois{ float: right; color: #006; margin-right: 5%;}
.pag-vitrine #depois:hover{ cursor: pointer; opacity: 0.7;}

.info-rigth{display: none;}
*/
/*Postagens*/

.news{ width: 100%; margin: 0 auto; text-align: center; overflow: auto;}
.postagem{ width: 98%; margin: 1% 1% 1% 1%; overflow: auto; cursor: pointer; border-radius: 7px; display: block;}
.postagem:hover{ border: 1px solid #CCC; background-color: #fcfcfc;}
.postagem img{  width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 7px 7px 0 0;}
.postagem:hover img{ opacity: 0.8; }
.postagem h2{ margin-bottom: 10px; font-size: 1.2em; font-weight: bold;}
.postagem:hover h2{ color: #000; }
.postagem p{ margin-bottom: 20px; line-height: 1.5em; color: #CCC; font-style: italic;}
.postagem:hover p{ color: #424068 }

.maisNews{ margin: 0 auto; text-align: center; margin-bottom: 20px; width: 200px; background-color: #333366; border-radius: 2px; cursor: pointer;}
.maisNews a{ color: #CCC; line-height: 3em;}
.maisNews:hover a { color: #333366; }
.maisNews:hover {background-color: #CCC; }

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

}
@media screen and (min-width: 768px){
	.news{ padding-left: 4%; }
	.postagem{width: 30%; float: left;}
}
@media screen and (min-width: 960px){
	.news{ padding-left: 5%; }
	.postagem{ width: 30%;}
}
@media screen and (min-width: 1024px){
	.news{ padding-left: 16%; }
	.postagem{ width: 25%;}
}
@media screen and (min-width: 1280px){
	
}



/* Newslatter */
.newsletter{ width: 100%; float: left; text-align: center; padding: 3% 4%; background-color: #DCDCDC/*669933*/; }
.newsletter h2{ font-size: 1.5em; color: #333366; font-weight: 700; }
.newsletter h3{color: #000;}
.newsletter form{ margin-top: 2%; }
.newsletter input{ width: 100%; background-color: #006; color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 5%; border-radius: 5px;}
.newsletter button{ width: 100%; background-color: #fff; color: #669933; padding: 5%; border-radius: 5px; cursor: pointer; margin-top: 2%;}
.newsletter button:hover{ background-color: #669933; color: #fff;}

/*informacoes*/
.informacoes{display: none; border-bottom: 1px solid #f5f5f5;}
.trad{ display: none; }
.btn-trans{ display: none; width: 56px; height: 56px; margin-top: 27px; font-size: 1.5em; float: right; text-align: center; color: #006; border-radius: 56px; cursor: pointer; background: none;}
@media screen and (min-width: 480px){

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

}
@media screen and (min-width: 960px){
	.btn-info{ display: none; }
	.btn-trans{ display: block; margin-right: 50px;}
	.traducao{ display: none; }
	.trad{ display: block; float: right; margin-top: 43px;}
	.informacoes{display: block; width: 550px; margin: 0 auto;}
	.taxaD{ float: left; margin-top: 35px;}
	.tempoD{ float: right; }
	.newsletter{ margin-bottom: 25px; }
}
@media screen and (min-width: 1024px){
	
}
@media screen and (min-width: 1280px){
	
}

/*Rodapé */
.rodape{ width: 100%; float: left; padding: 3% 4%; text-align: center;}
.social-icons{ width: 100%; float: left;}
.social-icons a{ font-size: 1.5em; color: #333366; margin: 3%; }
.social-icons a:first-child{ margin-left: 0; }
.social-icons a:last-child{ margin-right: 0; }
.social-icons a:hover{ color: #333366; opacity: 0.7;}
.pres{ width: 100%; float: left; }
.copyright{ margin-top: 2%; color: #333366; color: #333366;}
.copyright-t{ color: #333366; margin-bottom: 2%; font-size: 1.0em;}
.copyright-logo{ width: 30px; height: 30px; opacity: 0.7; background: url(../img/logo-mobile.png) center center/30px no-repeat; font-size: 0; margin: 0 auto;}
.copyright-logo:hover{ opacity: 1;}

@media screen and (min-width: 480px){
	.logo{width: 235px; height: : 50px; float: left; background: url(../img/logo-alto.png) center center/235px no-repeat; font-size: 0; margin: 2%; margin-right: 0;}
	.newsletter button{ font-size: 1.5em; }
	.newsletter input{ font-size: 1.5em; }
	/*.public{ width: 380px; height: 406px; ;max-height: 406px;}
	.post-cabecalho img{ width: 380px; height: 253px;}*/
}
@media screen and (min-width: 768px){
	.newsletter input{ width: 70%; float: left; padding: 2%; font-size: 1.3em;}
	.newsletter button{ width: 29%; float: left; margin-top: 0; border: 1px solid #fff; padding: 2%; font-size: 1.3em; margin-left: 1%;}
	/*.public{ /*width: 32%; float: left; margin-left: 1%;}
	.public{ width: 365px; height: 406px; ;max-height: 406px; float: left; margin-left: 2%;}
	.public:nth-child(2){ margin-left: 5px; }
	.post-cabecalho img{ width: 365px; height: 253px; }
	.public:last-child{ width: 96%; height: 253px; background-color: #fff; display: table-cell; vertical-align: middle; }
	.post-cabecalho img:last-child{ float: left; border-radius: 15px 0 0 15px;}
	.post-cabecalho h2:last-child{ float: left; text-align: left; margin-top: 40px; margin-left: 10px; margin-right: 10px;}
	.post-cabecalho p:last-child{ float: left; margin-left: 10px; margin-right: 10px; }*/

}

@media screen and (min-width: 960px){
	.btn-menu{ display: none; }
	.btn-close{ display: none; }
	.btn-info{ margin-top: 12px; }
	.menu{ display: block !important; position: static; float: left; width: 100%; line-height: 65px; height: 65px; background-color: #006;}
	.menu ul{ padding-left: 50%; }
	.menu ul li{ float: left; position: relative; padding: 0; margin: 0; text-align: center;}
	.menu ul li a{ color: #fff; font-size: 1em; padding: 25px 15px; font-size: 1.035em; }
	.menu ul li a.selecionado{ border: none; color: #000; font-weight: bold; font-size: 100%; background-color: #fff; color: #333366; }
	.menu ul li a:hover{ border: none; color: #000; font-weight: bold; font-size: 100%; background-color: #fff; color: #333366;}
	/*
	.menu{ min-width: 575px; width: auto; height: 65px; line-height: 65px; float: right; background-color: #f5f5f5; display: block !important; position: static;}
	.menu li{ padding: 0; float: left; text-align: center;}
	.menu li a{color: #333366; font-size: 1em; padding: 15px; font-size: 1.035em;}
	.menu li a:hover{ border: none; color: #000; font-weight: bold; font-size: 100%;}
	*/

}
@media screen and (min-width: 1024px){
	.logo{width: 275px; height: 58px; float: left; background: url(../img/logo-alto.png) center center/275px no-repeat; font-size: 0; margin: 2%; margin-right: 0; }
	/*.news{width: 98%; float: left;}
	.public{ width: 32%;}*/
	.newsletter{margin: 0 auto; margin-bottom: 25px;}
	.newsletter input{width: 45%; margin-left: 20%; padding: 1.5%; font-size: 100%;}
	.newsletter button{width: 20%; padding: 1.5%; font-size: 100%;}
@media screen and (min-width: 1280px){
}