@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

a{
	text-decoration: none;
	color: #000;
}

.content{
	max-width: 420px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

body{
	background-size: cover;
	background-position: center;
}

#app{
	min-height: 100vh;
	position: relative;
}

#app .topo{
	text-align: center;
	padding: 50px 0;
}	

#app .topo img{
	width: 230px;
	height: 230px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
}

#app .topo h1{
	font-size: 30px;
	line-height: 40px;
	margin: 20px 0 30px 0;
	color: #fff;
}

#app .links{
	display: flex;
	flex-direction: column;
}

#app .links a{
	border: 2px solid currentColor;
	margin-bottom: 30px;
	border-radius: 15px;
	height: 60px;
	position: relative;
	padding-left: 90px;
	font-weight: bold;
	padding-left: 0;
	padding: 0 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff!important;
}

#app .links a span{
	color: #fff!important;
}

#app .links .ico{
	
}

#app .links .ico svg{
	fill: currentColor;
	width: 30px;
	height: auto;
	margin-right: 80px;
	position: absolute;
	left: 20px;
	top: 11px;
}


footer{
	margin: 0 20px;
	padding: 40px 0;
	background: #fff;
	border-radius: 40px 40px 0 0;
	margin-top: 50px;
	color: #1d1d1d;
}

footer .container{
	max-width: 900px;
	padding: 0 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	left: 0;
	right: 0;
	margin: 0 auto;
}

footer a{
	font-size: 15px;
}

footer .container .item {
	display: flex;
	align-items: center;
	color: currentColor;
}

footer .container .item svg{
	fill: currentColor;
	width: 60px;
	height: auto;
	margin-right: 15px;
}

@media(max-width:  991px){

	footer{
		padding: 20px 0;
	}

	footer .container .item {
		font-size: 14px;
		line-height: 20px;
	}

	footer .container .item svg{
		width: 35px;
		min-width: 35px;
	}

	#app .topo{
		padding: 30px 0;
		margin-bottom: 30px;
	}

	#app .topo img{
		width: 160px;
		height: 160px;
	}

	#app .topo h1{
		font-size: 28px;
	}

	.content{
		padding: 0 15px;
	}

	footer a{
		color: #fff;
		font-size: 13px;
	}

}


#app.cor-1{
	background-image: linear-gradient(to right top, #88feff, #4ce0f9, #00c1f1, #00a0e5, #107ed2);
}
#app.cor-2{
	background-image: linear-gradient(to right top, #89ff52, #50ff91, #00ffc4, #15ffe9, #61faff);
}
#app.cor-3{
	background-image: linear-gradient(to right top, #fe005c, #ff5543, #ff862d, #ffb125, #f5d93b);
}
#app.cor-4{
	background-image: linear-gradient(to right top, #fc519f, #d44cad, #a44cb4, #6b4db3, #0c4baa);
}
#app.cor-5{
	background-image: linear-gradient(to right top, #20398a, #003677, #003164, #002b4f, #06243b);
}
#app.cor-6{
	background-image: linear-gradient(to right top, #edff20, #c2fb36, #96f54b, #65ee5f, #00e673);
}
#app.cor-7{
	background-image: linear-gradient(to right top, #000000, #282828, #4d4d4d, #747474, #9e9e9e);
}
#app.cor-8{
	background-image: linear-gradient(to right top, #000000, #3d0f1b, #760523, #b0001f, #e60000);
}
#app.cor-9{
	background-image: linear-gradient(to right top, #962cce, #d042b2, #eb6ca1, #f399a4, #efc4bd);
}
#app.cor-10{
	background-image: linear-gradient(to right top, #ff2100, #ff004a, #ff0087, #d800c7, #7230ff);
}
#app.cor-11{
	background-image: linear-gradient(to right top, #3cb6e7, #2d97c1, #1e799c, #0f5d79, #014258);
}
#app.cor-12{
	background-image: linear-gradient(to right top, #503fff, #008bff, #00aeff, #00c59d, #00d22b);
}
#app.cor-13{
	background-image: linear-gradient(to right top, #59acfe, #779fff, #9d8dff, #c377f0, #e559d6);
}
#app.cor-14{
	background-image: linear-gradient(to right top, #fbb040, #ffbf35, #ffcf29, #ffe019, #fff200);
}
#app.cor-15{
	background-image: linear-gradient(to right top, #e823b3, #ea59c4, #ec7cd3, #ee9bdf, #f0b7ea);
}
#app.cor-16{
	background-image: linear-gradient(to right top, #742d74, #642368, #54195c, #441051, #350645);
}

#app.cor-2 .links a, #app.cor-2 .links a span, #app.cor-2 h1{
	color: #1d1d1d!important;
}
#app.cor-6 .links a, #app.cor-6 .links a span, #app.cor-6 h1{
	color: #1d1d1d!important;
}
#app.cor-14 .links a, #app.cor-14 .links a span, #app.cor-14 h1{
	color: #1d1d1d!important;
}

#app.cor-2 footer{
	background: #1d1d1d!important;
	color: #fff!important;
}
#app.cor-6 footer{
	background: #1d1d1d!important;
	color: #fff!important;
}
#app.cor-14 footer{
	background: #1d1d1d!important;
	color: #fff!important;
}


.seletor-cor{
	position: fixed;
	right: 0;
	bottom: 0;
	background: #fff;
	display: flex;
	font-size: 14px;
	flex-direction: column;
}

.seletor-cor button{
	width: 100px;
	cursor: pointer;
}






#produtos{
	margin-bottom: 25px;
}

#produtos button{
	cursor: pointer;
	border: 2px solid currentColor;
	height: 60px;
	position: relative;
	font-weight: bold;
	padding: 0 20px;
	text-align: center;
	display: flex;
	border-radius: 15px;
	justify-content: center;
	align-items: center;
	color: #fff;
	width: 100%;
	background-color: transparent;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
}

#produtos button span{
	position: relative;
}

#produtos button svg{
	position: absolute;
	width: 14px;
	height: auto;
	fill: currentColor;
	transform: rotate(90deg);
	right: -35px;
	top: 3px;
}

#produtos button.active svg{
	transform: rotate(-90deg);
}

#produtos button .ico-button svg{
	width: 25px;
	height: auto;
	left: 22px;
	right: inherit;
	top: 15px;
	transform: rotate(0)!important;
}

#produtos .bloco-produtos{
	margin-top: 10px;
	display: none;
	border-radius: 15px;
	border:  2px solid #fff;
}

#produtos .bloco-produtos.active{
	display: block;
}

#produtos .bloco-produtos .menu{
	display: flex;
	gap:  20px;
	overflow-x: scroll;
	position: sticky;
	top: 0;
	padding: 15px;
	border-radius: 15px 15px 0 0;
	background-color: rgba(0, 0, 0, 0.5);
}

#produtos .bloco-produtos .menu a{
	font-size: 15px;
	white-space: nowrap;
	color: #fff;
	font-weight: 500;
	border: 1px solid currentColor;
	padding: 8px 30px 8px 15px;
	border-radius: 5px;
	position: relative;
}

#produtos .bloco-produtos .menu a.active{
	background: #fff;
	color: #888;
	border-color: #888;
}

#produtos .bloco-categoria{
	display: none;
	background: rgba(0, 0, 0, 0.3);
	padding: 5px 15px 15px 15px;
	border-radius: 0 0 15px 15px;
	/*max-height: 346px;
	overflow-y: scroll;*/
}

#produtos .bloco-categoria::-webkit-scrollbar {
	width: 5px;
	display: block;
}
#produtos .bloco-categoria::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 5px;
}
#produtos .bloco-categoria::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 5px;
}

#produtos .bloco-categoria.active{
	display: block;
}

#produtos .bloco-categoria .produto{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	color: #fff;
}

#produtos .bloco-categoria .produto img{
	width: 110px;
	height: 90px;
	object-position: center;
	object-fit: cover;
	border-radius: 5px;
	min-width: 110px;
	margin-right: 10px;
}

#produtos .bloco-categoria .produto .info-box{
	display: flex;
}

#produtos .bloco-categoria .produto .info h3, #produtos .bloco-categoria .produto .info strong{
	font-size: 15px;
	line-height: 24px;
}

#produtos .bloco-categoria .produto .info p{
	font-size: 13px;
	line-height: 23px;
}

#produtos .bloco-categoria .produto .ico{
	width: 25px;
	height: 25px;
	background: #fff;
	border-radius: 5px;
	font-size: 18px;
	font-weight: bold;
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 15px;
}

#produtos .bloco-categoria .produto .ico svg{
	width: 13px;
	height: auto;
	transform: rotate(90deg);
	transition: 0.3s;
	fill: #888;
}

#produtos .bloco-categoria .produto.active .ico svg{
	transform: rotate(-90deg);
}

#produtos .bloco-produtos .menu::-webkit-scrollbar {
	height: 5px;
	display: block;
}
#produtos .bloco-produtos .menu::-webkit-scrollbar-track {
	background: #f1f1f1;
}
#produtos .bloco-produtos .menu::-webkit-scrollbar-thumb {
	background: #888;
}




#app.cor-2 #produtos button, 
#app.cor-14 #produtos button, 
#app.cor-6 #produtos button,
#app.cor-2 #produtos .bloco-produtos .menu a,
#app.cor-14 #produtos .bloco-produtos .menu a,
#app.cor-6 #produtos .bloco-produtos .menu a,
#app.cor-2 #produtos .bloco-categoria .produto,
#app.cor-14 #produtos .bloco-categoria .produto,
#app.cor-6 #produtos .bloco-categoria .produto
{
	color: #1d1d1d!important;
}


#app.cor-2 #produtos .bloco-produtos, 
#app.cor-6 #produtos .bloco-produtos, 
#app.cor-14 #produtos .bloco-produtos{
	border-color: #1d1d1d;
}

#app.cor-2 #produtos .bloco-produtos .menu a.active,
#app.cor-14 #produtos .bloco-produtos .menu a.active,
#app.cor-6 #produtos .bloco-produtos .menu a.active
{
	background: #1d1d1d;
	color: #fff!important;
	border-color: #1d1d1d;
}

#app.cor-2 #produtos .bloco-produtos .menu,
#app.cor-14 #produtos .bloco-produtos .menu,
#app.cor-6 #produtos .bloco-produtos .menu
{
	background-color: rgba(255, 255, 255, 0.5);
}

#app.cor-2 #produtos .bloco-produtos, 
#app.cor-14 #produtos .bloco-produtos, 
#app.cor-6 #produtos .bloco-produtos,
#app.cor-2 #produtos .menu, 
#app.cor-14 #produtos .menu, 
#app.cor-6 #produtos .menu
{
	background-color: rgba(255, 255, 255, 0.3);
}

.modal-produto{
	position: fixed;
	left: 0;
	right: 0;
	bottom:  0;
	top: 0;
	z-index: 999;
	background: #fff;
	padding: 15px;
	display: none;
}

.modal-produto .modal-content{
	max-width: 500px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.modal-produto.active{
	display: block;
}

.modal-produto::before{
	left: 0;
	right: 0;
	bottom:  0;
	top: 0;
	background: rgba(255, 255, 255, 0.8);
	content: '';
	position: absolute;
}

.modal-produto .swiper-slide img{
	height: 300px;
	object-position: center;
	object-fit: cover;
	width: 100%;
}

.modal-produto .info{
	z-index: 999;
	position: relative;
	margin-top: 15px;
	color: #1d1d1d;
}

.modal-produto .info  p{
	margin: 15px 0;
	font-size: 15px;
	line-height: 25px;
}

.modal-produto .voltar{
	font-size: 16px;
	font-weight: bold;
	margin-top: 30px;
	height: 50px;
	width: 100%;
	background: #1d1d1d;
	color: #fff;
	border-radius: 15px;
	z-index: 999;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}


.produto-info{
	margin-top: 15px;
	margin-bottom: 35px;
	color: #fff;
	display: none;
}

.produto-info.active{
	display: block;
}

.produto-info .swiper-slide img{
	height: 250px;
	object-position: center;
	object-fit: cover;
	width: 100%;
}

.produto-info h2 {
	margin-top: 15px;
}

.produto-info p{
	margin: 12px 0;
	font-size: 15px;
	line-height: 25px;
}


#app.cor-2 .produto-info,
#app.cor-14 .produto-info,
#app.cor-6 .produto-info
{
	color: #1d1d1d;
}

.vcard-button {
	transition: 0.2s all ease-in-out;
	padding: 0.75rem 2rem;
	margin: 1rem 0 0;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
	font-size: 0.7rem;
	text-transform: uppercase;
	font-weight: 600;
	border: 1px solid #fff;
	color: #fff!important;
}

#app.cor-2 .vcard-button,
#app.cor-14 .vcard-button,
#app.cor-6 .vcard-button{
	color: #1d1d1d!important;
	border-color: #1d1d1d!important;
}