@charset "utf-8";

* {margin: 0; padding: 0;}
html {
	scroll-behavior: smooth;
}

body {font-family: 'Muli', sans-serif; background: #fff}
a {text-decoration: none; margin-top: 40px;}


/* ESTRUTURA */
@media only screen and (min-width: 681px) {
	#responsive {
		max-width: 1280px !important; position: relative; left: 50%; transform: translateX(-50%); padding: 0 30px;
	}
}

@media only screen and (max-width: 680px) {
	#responsive {
		max-width: 90% !important; margin: 0 5%;
	}
}

/* SCROLL */
::-webkit-scrollbar-track {background-color: #fff;}
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-thumb {background: #959595;}

/* MENU */
header {
	height: 50px;
	width: 100%;
	position: fixed !important; padding: 5px 0px;
	transition: ease-in-out .3s !important;
	-webkit-transition: ease-in-out .3s !important;
	background:  #FFF;
	z-index: 999 !important;
	top: 0 !important;
	margin-top: 0 !important;
}
header .logOficial {
	position: relative;
	height: 50px;
	width: auto;
	transition: ease-in-out .3s !important;
	-webkit-transition: ease-in-out .3s !important;
	}
.headerFixo {
	height: 40px;
	position: fixed !important; 
	padding: 5px 0!important;
	top: 0px !important;
	background:  rgba(255,255,255,0.8);
	backdrop-filter: blur(5px) brightness(1.3);
	-webkit-backdrop-filter: blur(5px) brightness(1.3);
	box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.headerFixo .logOficial {
	height: 40px !important;
}


/* HEADER, menu */
@media only screen and (max-width: 680px) {
	.menu {
		position: relative;
		float: right;
		margin-top: 5px;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;
	}
	.menu li {
		list-style-type: none;
		padding: 5px;
	}
	.menu li i {
		font-size: 25px;
		color: #736966;
		
	}
	.menu li ul {
		display: none;
		position: fixed;
		z-index: 999;
		width: 70vw;
		height: 100vh;
		float: right;
		top: 0;
		right: 0;
		background: rgba(255,255,255,0.95);
	}
	.menu li:hover ul {
		display: block;
	}
	.menu ul .logoMenu {
		display: block;
		width: 30%;
		height: auto;
		position: relative; 
		left: 50%;
		transform: translateX(-50%);
		margin-top: 40px;
		margin-bottom: 30px;
	}
	.menu ul a {
		color: #736966;
		font-style: oblique;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;
	}
	.menu ul a:hover {

	}
	.menu ul li {
		list-style-type: none;
		font-size: 18px;
		padding: 10px 15px;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;
		text-align: center;
	}
	.menu ul li:hover {
		text-decoration: line-through;
	}

	.headerFixo .menu {
		margin-top: 0 !important;
	}
}

@media only screen and (min-width: 681px) {
	.menu {
		position: relative;
		float: right;
		margin-top: 5px;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;
	}
	.menu li {
		list-style-type: none;
	}
	.menu li i {
		display: none;
	}
	.menu ul a {
		color: #736966;
		font-style: oblique;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;
	}
	.menu ul a:hover {

	}
	.menu ul .logoMenu {
		display: none;
	}
	.menu ul li {
		display: block;
		list-style-type: none;
		font-size: 15px;
		float: left;
		padding: 10px;
		transition: ease-in-out .3s !important;
		-webkit-transition: ease-in-out .3s !important;	
	}
	.menu ul li:hover {
		text-decoration: line-through;
	}

	.headerFixo .menu {
		margin-top: 0 !important;
	}
}
/* HEADER, menu > fim */


/* DESTAQUES */
.poster-featured {
	position: relative;
	width: 100% !important;
	min-height: 580px;
	height: 100vh;
	margin-top: 60px;
	background: #000;
	overflow: hidden;
	border-bottom: 10px solid #DFDFDF;
	
}
.iten-featured {
	width: calc(100vw + 30px) !important;
	height: 100vh; min-height: 680px;
	position: relative;
	transition: ease-in-out 0.2s;
	left: -30px !important;
}
.iten-featured img {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 100;
	object-fit: cover;	
}
.iten-featured .mask-featured {
	width: 100%;
	z-index: 200;
	min-height: 680px;
	height: 100vh;
	position: absolute;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5));
}

/* ONE PAGE */
.section-style {
	width: 100%; height: calc(100vh - 60px); min-height: 600px; position: relative;
}
.link-one {
	position: relative;
	top: -30px;
}


/* INDEX, coleção */
@media only screen and (min-width: 961px) {
.collection-link {
	position: relative;
	top: -130px;
}
.collection {
	margin-top: -60px;
	z-index: 300;
	display: grid;
	column-gap: 20px;
	grid-template-columns: 2fr 3fr 1fr;
}
.collection a {
	margin-top: 0 !important;
}
.collection .item {
	height: 280px;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	transition: ease-in-out .3s;
}
.collection .item p {
	position: relative;
	width: 70%;
	margin: 20px auto;
	color: #F9C354;
	text-align: justify;
}
.collection .item h4 {
	position: relative;
	width: 70%;
	margin: 20px auto;
	color: #F9C354;
	text-align: center;
	font-weight: 700;
}
.collection .item h6 {
	position: relative;
	font-size: 14px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80% !important;
	color: #F9C354;
	text-align: center;
	transition: ease-in-out .3s;
}
.collection .buttom:hover {
	background:#F9C354;
}
.collection .buttom:hover h6 {
	color: #fff;
}
.collection .logo-collection {
	overflow: hidden;
}
.collection .logo-collection img {
	position: relative;
	height: 100%;
	width: 100%;
	object-fit: cover !important;
}
.collection-mobile {
	display: none;
}}

/* INDEX, coleção, mobile */
@media only screen and (max-width: 960px) {
.collection {
	display: none;
}
.collection-mobile {
	margin-top: -60px !important;
	z-index: 300;
}
.collection-mobile .item {
	height: auto;
	padding: 20px 0;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	transition: ease-in-out .3s;
	margin-bottom: 40px;
}
.collection-mobile .logo-collection {
	padding: 0 !important;
	height: 180px;
}
.collection-mobile .logo-collection img {
	position: relative;
	height: 100%;
	width: 100%;
	object-fit: cover !important;
}
.collection-mobile .item p {
	position: relative;
	width: 70%;
	margin: 20px auto;
	color: #F9C354;
	text-align: justify;
}
.collection-mobile .item h4 {
	position: relative;
	width: 70%;
	margin: 20px auto;
	color: #F9C354;
	text-align: center;
	font-weight: 700;
}
.collection-mobile .item a > div {
	width: 70%;
	margin: 0 15%;
	padding: 20px 0;
	background: #F9C354;
	color: #fff;
	margin-top: 30px;
	text-align: center;
}}

/* INDEX, coleção > fim */


/* INDEX, a marca */
.the-brand {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}
@media only screen and (min-width: 681px) {
.the-brand img {
	position: relative;
	z-index: 100;
	width: 60%;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.15;
}
.the-brand .text {
	position: relative; 
	z-index: 200;
	margin-top: -6%;
	width: calc(100% - 80px);
	height: auto;
	padding: 80px 40px;
	background: transparent;
	backdrop-filter: blur(3px);
	border-radius: 5px;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.the-brand .text p {
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	width: 60%;
	text-align: justify;
	font-size: 16px;
	line-height: 26px;
	margin: 15px 0;
	color: #877C7A;
}}
@media only screen and (max-width: 680px) {
.the-brand img {
	position: relative;
	z-index: 100;
	width: 100%;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.15;
}
.the-brand .text {
	position: relative; 
	z-index: 200;
	margin-top: -12%;
	width: calc(100% - 80px);
	height: auto;
	padding: 80px 40px;
	background: transparent;
	backdrop-filter: blur(3px);
	border-radius: 5px;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.the-brand .text p {
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	width: 80%;
	text-align: justify;
	font-size: 16px;
	line-height: 26px;
	margin: 15px 0;
	color: #877C7A;
}}
/* INDEX, a marca > fim */

/* COLEÇÃO E MARCA */
.item-colmar {
	width: calc(50% - 30px); position: relative; background: #fff; border-radius: 5px; box-shadow: 0 0 35px rgba(0,0,0,.1); height: 660px; float: left; display: table; margin: 50px 0; overflow: hidden;
}
.marca {
	margin-left: 30px;
}
.marca img {
	width: 100% !important; position: absolute; bottom: 0;
}
.colecao {
	margin-right: 30px;
}
.colecao img {
	width: 100% !important; position: relative;
}
.colecao h1 {
	position: absolute; top: 40px;  font-size: 40px; color: #fff; font-family: 'Merienda', cursive; text-align: center; left: 50%; transform: translate(-50%);
}
.colecao p, .marca p {
	margin: 20px 60px; color: #424242; font-size: 15px;
}
.colecao a {
	display: table; right: 20px; position: absolute; bottom: 20px; color: #8A7E7B; font-weight: 700;
}

@media screen and (max-width: 860px) {
	.item-colmar {
		width: calc(100% - 40px); margin: 30px 20px;
} 

	.marca img {
		width: 100% !important; position: relative;
}}


/* CATÁLOGO */
.catalogo {
	background: url(../image/fundoCatalogo.png); background-repeat: repeat-x; height: 800px !important;
}
.catalogo h1 {
	display: table; background: #c1c7ad; color: #fff; font-size: 30px; padding: 14px 15px; left: 50%; transform: translateX(-50%); top: 33px; position: relative;
}
.catalogo .item-catalogo {
	height: 480px; position: relative; border: rgba(0,0,0,0) 1px solid; transition: all 0.3s; overflow: hidden; border-radius: 5px;
}
.catalogo .item-catalogo:hover {
	border: #c1c7ad 1px solid;
}
.catalogo .item-catalogo img {
	position: absolute; z-index: 0; height: 100%; min-width: 100%;  transform: translate(-50%, -50%); transition: all cubic-bezier(.77,.43,.42,1.34) 0.2s; left: 50%; top: 50%;
}
.catalogo .item-catalogo:hover img {
	transform: translate(-50%, -50%) scale(1.1); left: 50%; top: 50%;
}
.catalogo .item-catalogo .mask {
	height: 100%; width: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.75)); position: absolute; z-index: 1;
}
.catalogo .item-catalogo .mask h2 {
	color: #fff; font-size: 17px; margin: 0 20px; position: absolute; text-transform: uppercase;  bottom: 60px; text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.catalogo .item-catalogo .mask p {
	color: #fff; font-size: 10px; position: absolute; display: table; padding: 5px 7px; border-radius: 10px; background: rgba(0,0,0,0.5); transition: all 0.3s; bottom: -20px; left: 50%; transform: translateX(-50%); opacity: 0.5;
}
.catalogo .item-catalogo:hover .mask p {
	padding: 5px 10px; bottom: 60px !important; opacity: 1;
}

.catalogo .slider {width: 100%; margin-top: 100px;}
.catalogo .slick-slide {margin: 0px 7px;}
.catalogo .slick-prev:before,.slick-next:before {color: black;}
.catalogo .slick-slide {transition: all ease-in-out .3s; opacity: .8; outline: none;}
.catalogo .slick-slide .itemVertical {box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
.catalogo .slick-slide:hover {opacity: 1;}
.catalogo .slick-active {opacity: 1;}
.catalogo .slick-current {opacity: 1;}

.catalogo .bottom {
	padding: 10px 0; position: relative; margin-top: 40px; background: #555; color: #fff; font-size: 18px; font-weight: 700; transition: all 0.3s; text-align: center;
}
.catalogo .lead-more {
	width: 360px; position: relative; display: table; text-align: center; left: 50%; transform: translateX(-50%);
}
.catalogo .lead-more:hover {
	background: #222;
}
.catalogo .download-pdf {
	position: relative; left: 50%; transform: translateX(-50%); font-size: 14px !important; text-align: center; margin-top: 20px; color: #777; transition: all 0.3s; border-bottom: 3px solid rgba(156,189,183,0); display: table;
}
.catalogo .download-pdf:hover {
	color: #333; border-bottom: 3px solid #c1c7ad; padding-bottom: 5px;
}


/* BLOG */
.blog {
	display: table;
}
.blog h1 {
	display: table; background: #c1c7ad; color: #fff; font-size: 30px; padding: 14px 15px; left: 50%; transform: translateX(-50%); top: 33px; position: relative; margin-bottom: 60px !important;
}
.blog .item-blog {
	width: calc(50% - 30px); position: relative; float: left; height: 420px; background: #D0B7B7; margin: 120px 15px 0 15px; overflow: hidden; border-radius: 5px;
}
.blog .item-blog .mask-blog {
	position: absolute; height: calc(100% - 60px); width: calc(100% - 60px); top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8)); padding: 30px;
}
.blog .item-blog .mask-blog h6 {
	position: relative; color: #fff; margin-top: 300px; font-size: 10px; padding: 5px 7px; background: rgba(255,255,255,0.2); border-radius: 3px; display: table; left: 50%; transform: translateX(-50%); transition: all 0.3s;
}
.blog .item-blog .mask-blog p {
	font-size: 18px; margin-top: 5px; color: #fff; position: relative; text-align: center;
}
.blog .item-blog:hover h6 {
	margin-top: 290px; padding: 5px 10px;
}

@media screen and (max-width: 860px) {
	.blog .item-blog {
		width: calc(100% - 40px); margin: 30px 20px !important;
}}

/* CONTATO */
.contato {
	background: url(../image/fundoCatalogo.png); background-repeat: repeat-x; height: 100vh !important; min-height: 600px;
}
.contato h1 {
	display: table; background: #c1c7ad; color: #fff; font-size: 30px; padding: 14px 15px; left: 50%; transform: translateX(-50%); top: 33px; position: relative;
}
.contato .contato-alinhamento {
	display: table; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.contato p {
	font-size: 14px; color: #999; margin-top: 20px; display: table; left: calc(50% - 180px); position: relative;
}
.contato input, .contato textarea {
	height: 40px; min-width: 360px; max-width: 360px; background: transparent; border: none; border-bottom: 2px #999 solid !important; outline: none; left: 50%; transform: translateX(-50%); transition: all cubic-bezier(.77,.43,.42,1.34) 0.4s; position: relative; font-size: 15px; font-weight: 700; color: #999;
}
.contato textarea {
	margin-top: 20px; shape-outside: 260px;
}
.contato input:hover, .contato textarea:hover {
	border-bottom: 2px solid #555;
}
.contato #enviar {
	height: 40px; min-width: 360px; max-width: 360px; background: #999; border: none; outline: none; left: 50%; transform: translateX(-50%); transition: all cubic-bezier(.77,.43,.42,1.34) 0.4s; position: absolute; font-size: 15px; font-weight: 700; color: #fff; bottom: 30px;
}


/* CATÁLOGO - NAVEGAR */
.navegar {
	width: 100%; position: relative; margin-top: 90px !important; margin-bottom: 30px; padding: 15px 0 30px 0px; background: #EFEFEF; display: table;
}
.navegar h1 {
	font-size: 20px; color: #555; font-weight: 700; padding: 10px 0; text-align: center;
}
.navegar .nav-item {
	width: 30%; position: relative; float: left; margin: 0 1.66%;
}
.navegar .nav-item p {
	font-weight: 700; color: #777; padding: 15px 0px;
}
.navegar .nav-item li {
	list-style: none; color: #FFF; padding: 5px; font-size: 13px; background: #777; display: table; margin: 2px; border: 1px solid #777; transition: 0.5s cubic-bezier(.77,.43,.42,1.34); float: left;
}
.navegar li:hover {
	color: #777; background: #fff; display: table;
}
.nav-tam {
	display: table;
}

@media screen and (max-width: 720px) {
	.navegar h1 {
		font-size: 15px; color: #555; font-weight: 700; padding: 10px 0; text-align: center;
}
	.navegar .nav-item {
		width: 80%; position: relative; margin: 0 10%;
}
	.navegar .nav-item p {
		padding: 10px 0px;
	}
	.navegar .nav-item li {
		font-size: 10px;
	}
}

.catalogoList {
	width: 100% !important; margin-top: 20px !important; position: relative; display: table;
}
.catalogoList .item {
	width: calc(20% - 12px) !important; margin: 5px; height: 460px; transition: 0.2s cubic-bezier(.77,.43,.42,1.34); position: relative; float: left; z-index: 500; border-radius: 2px; box-shadow: 0 0 30px rgba(0,0,0,0.07); background: #fff;
}
.catalogoList .item:hover {
	box-shadow: 0 0 80px rgba(0,0,0,0.5); z-index: 800; transform: scale(1.1)
}
.catalogoList .item::after {
	content: 'Veja Mais'; font-weight: 700; width: 100% !important; text-align: center; padding: 10px 0; background: #555; color: #fff; position: absolute; bottom: -50px; opacity: 0; transition: 0.5s cubic-bezier(.77,.43,.42,1.34) !important; font-size: 12px;
}
.catalogoList .item:hover::after {
	opacity: 1; bottom: -35px;
}

.table-ref {
	position: absolute; bottom: 10px; height: 60px; width: 100%;
}

.catalogoList .item .img {
	width: 100%; height: 240px; position: relative;
}
.catalogoList .item p {
	width: 80%; margin: 20px 10%; font-size: 15px; font-weight: 700; color: #555;
}

.catalogoList .item .referencia {
	width: 80%; margin: 0 10%; display: table;
}
.catalogoList .item .referencia img {
	position: relative; float: left; margin-right: 15px;
}
.catalogoList .item .referencia p {
	font-weight: 300; font-size: 12px;
}

@media screen and (max-width: 960px) {
	.catalogoList .item {
		width: calc(25% - 12px) !important; margin: 5px;
} }

@media screen and (max-width: 860px) {
	.catalogoList .item {
		width: calc(33.33% - 12px) !important; margin: 5px;
} }

@media screen and (max-width: 680px) {
	.catalogoList .item {
		width: calc(50% - 12px) !important; margin: 5px;
}
.catalogoList .item:hover {
	z-index: 800 !important; transform: scale(1) !important;
} }
@media screen and (max-width: 480px) {
	.catalogoList .item {
		width: 80% !important; margin: 5px 10%;  height: 560px;
}
.catalogoList .item .img {
	width: 100%; height: 340px; position: relative;
}
.catalogoList .item:hover {
	z-index: 800 !important; transform: scale(1) !important;
}}


/* PEÇA */
.peca {
	max-width: 1280px !important; min-width: 360px; position: relative; left: 50%; transform: translateX(-50%); margin: 160px 0 60px 0; height: 100vh;
}
.peca h1 {
	color: #8A7E7B; font-weight: 700; font-size: 36px;
}
.peca .informacoes {
	width: calc(50% - 30px); float: right; height: 100%; position: relative; margin-left: 30px;
}
.peca .informacoes .referencia {
	left: 0; position: relative; display: table; padding: 5px; width: 100%;
}
.peca .informacoes .referencia img {
	left: 0; position: relative; float: left; margin-right: 15px; transform: scale(0.7);
}
.peca .informacoes .referencia h2 {
	left: 40px; position: absolute; color: #555; width: 80px; margin-top: 30px;  font-size: 16px;
}
.peca .informacoes .referencia h3 {
	left: 40px; position: absolute; color: #666; width: 70%; margin-top: 5px;  font-size: 14px;
}
.peca .informacoes p {
	left: 0; position: relative; color: #777; font-size: 14px; margin: 40px 0 ; line-height: 20px; width: 70%; text-align: justify;
}
.peca .informacoes .referencia .tag {
	font-size: 12px; font-weight: 700; padding: 5px; background: #555; color: #fff; text-align: center; position: absolute; top: 25px;
}
.peca .galeria {
	width: 50%; height: 100% !important; position: relative; overflow: hidden; float: left;
}
.peca .galeria img {
	height: calc(100vh - 160px); width: auto !important; position: absolute; left: 50%; transform: translateX(-50%);
}

.galeria:hover .slick-prev,
.galeria:hover .slick-next {
	opacity: 1;
}

@media screen and (max-width: 760px) {
	.peca {
		height: auto !important; margin: 0; margin-top: 120px !important;
	}
	.peca .informacoes {
		width: calc(100% - 40px); display: table; position: relative; margin: 0 20px; float: none;
}
.peca .galeria {
	width: 100%; height: 100% !important; position: relative; overflow: hidden;
}
.peca .informacoes p {
	left: 0; position: relative; color: #777; font-size: 14px; margin: 40px 0 ; line-height: 20px; width: 100%; text-align: justify;
}
		.peca .informacoes h1 {
	font-size: 26px;
}
	.peca .informacoes .referencia h2 {
	position: absolute; color: #555; width: 80px; margin-top: 30px;  font-size: 16px;
}
.peca .informacoes .referencia h3 {
	position: absolute; color: #666; width: 100%; margin-top: 5px;  font-size: 14px;
}}

/* FOOTER */
footer {
	width: 100%; padding: 20px 0 60px 0; background: #999; position: relative;
}
footer .bar {
	padding: 10px 0; background: rgba(0,0,0,0.1); width: 100%; position: absolute; bottom: 0;
}
footer p {
	font-size: 13px; color: #fff; margin-top: 20px;
}
footer .bar p {
	color: #fff !important; text-align: center; margin: 0 !important;
}
footer .bar p a {
	color: #DDDDDD !important;
}

/* LOGIN.PHP */
.barraAcesso {
	width: 280px; display: table; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(217,217,217,1.00); padding: 20px;
}
.barraAcesso p {
	font-size: 14px; color: #9F9F9F; margin-bottom: 30px;
}
.barraAcesso input {
	outline: none; height: 60px; border: none; background: #fff; border-radius: 3px; margin-bottom: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05); width: calc(100% - 40px); padding: 0 20px; transition: all 0.3s;
}
.barraAcesso input:hover, .barraAcesso input:focus{
	box-shadow: 0 0 20px rgba(0,0,0,0.2); transition: all 0.3s;
}
.barraAcesso .buttonEntrar {
	width: 320px !important; font-weight: 700; transition: all 0.3s; cursor: pointer;
}
.barraAcesso .buttonEntrar:hover {
	opacity: 0.7;
}
.barraAcesso img {
	position: relative; left: 50%; transform: translateX(-50%);
}