@charset:"UTF-8";
@import url(https://fonts.googleapis.com/css?family=Mukta);
body{
	background-color: rgb(255,255,255);
	font-family: 'Mukta', cursive;
	margin: 0px;
	padding: 0px;
	/*color: rgb(156, 135, 83)*/
}

H1{
	font-size: 25px;
}
div#interface{
	margin: 0px;
}
/* --------------------- Cabeçalho geral --------------------------*/
	div#news{
		height: 25px;
		width: 100%;
		background-color: #eae4ff/*#9c8753*/;
		z-index: 900;
		transition: opacity 0.3s ease;

	}
	.marquee{
		width: 100%;
		overflow: hidden;
 	 	white-space: nowrap;
  		box-sizing: border-box;
	}
	.marquee h3 {
		display: inline-block;
		padding-left: 100%;
		animation: scroll-left 30s linear infinite;
		margin-top: 0px;
		font-weight: normal;
		font-size: 17px;
		color: #9c8753;
	}
	.marquee h3 a{
		color: #9c8753;
	}
	@keyframes scroll-left {
		0% {
			transform: translateX(0%);
		}
		20% {
    transform: translateX(-50%); /* pause for a moment */
  		}
		100% {
			transform: translateX(-50%);
		}
	}
	/*---------Cabeçalho slide up----------*/
	header#cabecalho.scroll-up{
		top:0;
	}

	header#cabecalho{
		position:fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 190px;
		background-color: white;
		transition: transform 0.3s ease;
		z-index: 1000;
	}
	header#cabecalho img#logo{	
		height: 150px;
		width: auto;
		transform: translatey(-20px);
	}
/*------------- FIM TESTE*/
	figure#imagem{
		height: 680px;
		width: 100%;
		margin: auto;
	}

	figure#imagem img{
		margin-top: 190px;
		width: 100%;
		height: 100%;
	}

	header#cabecalho img#coffee{
		height: 100%;
		/**/
	}

	header#cabecalho div#rede-social ul#redes{
		position: absolute;
		/**/
	}

	header#cabecalho div#rede-social ul#redes li{
		display: inline-block;
		list-style: none;
		padding: 3px;
	}

	header#cabecalho div#rede-social ul#redes li a{
		text-decoration: none;
		/**/
	}

/*Fim cabeçalho geral*/

/* --------------------- Menu principal encolhido --------------------------*/
	nav#menuenc{
		position: absolute;
		top: 10px;
		left: 0px;
		margin-right: 50px;
		z-index: 1;
		display: none;
		margin-left: 0px;
		padding-left: 0px;
	}
	
	nav#menuenc li{
		display: block;
		list-style: none;
		padding: 5px 10px 5px 10px;
		font-size: 22px;
		/*background-color: rgb(202,221,247);*/
	}

	nav#menuenc li img{
		width: 20px;
	}

	nav#menuenc li ul{
		position: absolute;
		display: none;
		left: 0px;

	}

	nav#menuenc li a{
		text-decoration: none;
		color: #666666;
	}

	nav#menuenc li:hover{
		background-color: rgb(255,255,255);
	}
	
	nav#menuenc li:hover ul#menu-400, nav#menuenc li.over ul#menu-400{
		display: block;
		
	}

	/*> Aqui fica o que esta na untitled*/
	
	li.menuexp:hover ul#submenuenc, li.menuexp.over ul#submenuenc{
		display: block;
		left: 95px;
		top: 100px;
	}

	ul#submenuenc li{
		display: block;
		border: 1px solid;
		background-color: rgb(206,206,206);
		background-color: rgb(255,255,255);
		width: 115px;
		margin: 1px;
		font-size: 16px;
	}
	
	ul#submenuenc li:hover{
		background-color: rgb(192,215,248);
	}

	ul#submenuenc li:hover ul.subitemenc, nav#submenuenc li.over ul.subitemenc{		
		display: block;
		left: 0px;
		top: 0px;
		
	}

	nav#menuenc ul#submenuenc li ul.subitemenc{
		position: absolute;
		left: 137px;
	}

	nav#menuenc ul#submenuenc li ul.subitemenc li{
		position: relative;
		display: block;
		background-color: rgb(255,255,255);
		margin: 1px;
		padding: 1px;
		width: 116px;
	}

	nav#menuenc ul#submenuenc li ul.subitemenc li:hover{
		background-color: rgb(192,215,248);
		
	}

	ul#submenuenc-bolo{
		top: 0px;
		
	}

	nav#menuenc ul#submenuenc li ul#submenuenc-brigadeiro{
		top: 055px;
		
	}

	nav#menuenc ul#submenuenc li ul#submenuenc-cupcakes{
		top: 110px;
		
	}
/*Fim menu principal encolhido*/

/* --------------------- Menu principal normal --------------------------*/
	/*---------------Ocultando o nav#menuenc com o display:none----------- */
	/*nav#menuenc{
		display: none;
	}*/
	nav#menu{
		/*background-color: rgb(255,255,255);*/	
		position: absolute;
		top: 143px;
		height: 40px;
		left: 27%;
		/*margin-top:-25px;
		position: relative;
		float: right;
		z-index: -1;*/
	}
	
	nav#menu li{
		display: inline-block;
		list-style: none;
		padding: 	0px 30px 0px 30px;
		font{
			size: 22px;
		}
		background-color: rgb(255,255,255);
	}

	nav#menu li ul{
		position: absolute;
		display: none;
		left: 235px;
	}

	nav#menu li a{
		text-decoration:none;
		opacity: 1;
		font-size: 18px;
		color: rgb(156,135,83);
	}

	nav#menu li:hover{
		background-color: rgb(241,238,213);
		/**/
	}

	nav#menu li:hover ul#submenu, nav#menu li.over ul#submenu{
		display: block;
		left: 290px;
			/**/
	}

	nav#menu li ul#submenu li{
		display: block;
		/*border: 1px solid;
		background-color: rgb(206,206,206);*/
		background-color: rgb(255,255,255);
		width: 180px;
		margin: 1px;
		padding: 3px;
		font-size: 16px;
	}

	nav#menu li ul#submenu li:hover{
		background-color: rgb(241,238,213);
		/**/
	}

	nav#menu ul#submenu li:hover ul.subitem, nav#submenu li.over ul.subitem{
		display: block;
		/**/
	}

	nav#menu ul#submenu li ul.subitem{
		position: absolute;
		left: 190px;
	}

	nav#menu ul#submenu li ul.subitem li{
		position: relative;
		display: block;
		background-color: rgb(255,255,255);
		margin: 1px;
		padding: 1px;
		width: 150px;
	}

	nav#menu ul#submenu li ul.subitem li:hover{
		background-color: rgb(192,215,248);
		/**/
	}

	nav#menu ul#submenu li ul#submenu-bolo{
		top: 0px;
		/**/
	}

	nav#menu ul#submenu li ul#submenu-brigadeiro{
		top: 055px;
		/**/
	}

	nav#menu ul#submenu li ul#submenu-cupcakes{
		top: 110px;
		/**/
	}
/*Fim Menu Principal normal*/

/* --------------------- Conteúdo --------------------------*/

	section#conteudo{
		position: relative;
		width: 100%;
		background-color: white;
		margin: 0px;	
			margin-top: 30px;
	}

	article#principal{
		position: absolute;
		background-color: rgb(255,255,255);
		margin: 190px 0px 0px 0px;
		padding-bottom: 0px;
	}

	/* --------------------- Página contato --------------------------*/	
		article#principal div#contato{
			margin: 0px;
			padding: 50px;
		}

		article#principal div#contato ul li{
			width: 400px;
			text-align: justify;
			vertical-align: text-top;
			position: relative;
			list-style: none;
			display: inline-block;
			margin-top: 10px;
			margin-right: 15px;
			}

		article#principal div#contato ul li a{
			color: rgb(0, 0, 0)/*rgb(156, 135, 83)*/
		}

		article#principal div#contato ul li img{
			height: 30px;
		}

	/*Fim Formulário pág. Contato*/

	/* --------------------- Pág. Produtos --------------------------*/
		h1#catalogo{
			font-size: 30px;
			text-align: center;
		}

		article#principal ul#catalogos{
			position: relative;
			margin: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}

		article#principal ul#catalogos li{
			position: relative;
			height: 200px;
			width: 200px;
			list-style: none;
			display: inline-block;
			border: 8px solid rgb(255,255,255);
			box-shadow: 0px 0px 5px;
			margin-top: 10px;
			margin-right: 15px;
			margin-bottom: 20px;
			text-align: center;
		}
		article#principal ul#catalogos a{
			color: rgb(156, 135, 83)
		}

		article#principal ul#catalogos li img{
			width: auto;
			height: 160px;
		}

	/*Fim Pág. Produtos*/

	/* --------------------- Pág. Galeria --------------------------*/	
		article#principal div#album{
			position: relative;
			width: 100%;
			height: 100%;
			margin: auto;
		}
		article#principal div#album div#miniaturas{
			position: relative;
			width: 90%;
			height: 80%;
			margin: auto;
		}
		h1#nome-produto{
			font-size: 40px;
		}
		article#principal div#album div#miniaturas ul#lista-miniaturas{
			width: 90%;
			margin: auto;
		}
		article#principal div#album div#miniaturas ul#lista-miniaturas li{
			position: relative;
			height: 120px;
			width: 180px;
			list-style: none;
			display: inline-block;
			border: 8px solid rgb(255,255,255);
			box-shadow: 0px 0px 5px;
			margin-right: 15px;
			margin-bottom: 10px;
			text-align: center;
		}
		article#principal div#album div#miniaturas ul#lista-miniaturas li img{
			height: 80%;
		}
		
		article#principal div#album div#miniaturas ul#lista-miniaturas li figure#produto img{
			height: 80%;
		}

		div#foto-ampliada{
			position: fixed;
			display: none;
			float: left;
			background-color: rgba(255,255,255,.8);
			z-index: 2;
			width: 100%;
			height: 100%;
			margin: -10px 0px 0px -10px;
			padding: 0px;
		}

		div#foto-ampliada img#imagem-ampliada{
			position: absolute;
			width: 70%;
			height: 80%;
			border: 8px solid white;
			box-shadow: 0px 0px 8px;
			margin-left: 15%;
			margin-top: 5%;
		}

		div#foto-ampliada img#fechar-foto{
			position: absolute;
			float: right;
			margin-top: 5.7%;
			right:14.7%;
		}
	/*Fim Pág. Galeria*/

	/*--------------------- Pág. Angélica Cobo --------------------------*/
		article#principal div#quemsomos {
			position: relative;
			margin-right: 30px;
			margin-left: 5px;
			margin-bottom: 30px;
			padding: 30px;
		}

		article#principal div#quemsomos div#historia {
			position: relative;
			margin-right: 30px;
			margin-left: 30px;
			margin-bottom: 30px;
			padding: 30px;
			width: 45%;
		}

		article#principal div#quemsomos div#fotoquemsomos{
			position: absolute;
			right: 5%;
			margin: -380px 0px 5px 5px;
			padding: 10px;
			width: 35%;
		}

		article#principal div#quemsomos div#fotoquemsomos figure#foto_quemsomos img{
			height:auto;
			width:auto;
		}

		article#principal div#comotrabalhamos{
			position: relative;
			top:-120px;
			margin-right: 30px;
			margin-left: 5px;
			margin-bottom: 0px;
			padding: 1px;

		}

		article#principal div#comotrabalhamos div#historia {
			position: absolute;
			right: 5%;
			margin-top: 100px;
			margin-right: 5px;
			margin-left: 15px;
			margin-bottom: 0px;
			padding: 30px;
			padding-bottom: 0px;
			width: 40%;
		}

		article#principal div#comotrabalhamos div#fotocomotrabalhamos{
			position: relative;
			margin: 190px 10px 5px 160px;
			padding: 10px;
			width: 3%;
		}

		article#principal div#comotrabalhamos div#fotocomotrabalhamos figure#foto_comotrabalhamos img{
			height:auto;
			width:auto;
		}
	/*Fim Pág. Angélica Como*/

		/* --------------------- Página index --------------------------*/
			article#principal div#newsletter{	
				position:relative;
				width: 100%;

			}	
			article#principal div#logoindex{	
				display: flex;
				flex-direction: column;
				position: relative;
				justify-content: center;
				align-items: center;
				width: 100%;
			}	
			article#principal div#logoindex img{
				max-width: 60%;
				max-height: 60%;
				height: auto;
				width: auto;
				display: block;
				margin: 0 auto; 
			}	
			article#principal div#logoindex a img{
				margin-top: -30px;
				width: 60%;
			}

		/* --------------------- Fim Página index --------------------------*/
	/*--------------------- DIV Whatsapp --------------------------*/
		div#wpp{
			position: fixed;
			left: 95%;
			top: 90%;
			z-index: 1;
		}

		div#wpp img#icone {
			position: relative;
			width: 48px;
		}
	/*Fim DIV Whatsapp*/
/* Fim conteúdo*/

/* --------------------- Rodapé --------------------------*/

	
	footer#rodape{
		background-color: rgb(241,238,213);
		width: 100%;
		height: 50px;
	}
	
	footer#rodape div#instagram{
		width: 40px;
		position: relative;
		margin: 0px;
		margin-bottom: 0px;
		padding: 10px;
	}

	footer#rodape div#instagram img{
		width: 40px;
		margin-bottom: 0px;
	}
/*Fim Rodapé*/

/*--------------------- Visualização abaixo de 400px --------------------------	
	@media(max-width: 400px){

		/* --------------------- Cabeçalho --------------------------*/
		/*header#cabecalho{
			width: 100%;
			height: 100%;
		}
			header#cabecalho img#logo{
				top: 5px;
				left: 35%;
				max-width:200px;
    			max-height:150px;
    			width: auto;
    			height: auto;
			}

		/*Fim Cabeçalho*/

		/* --------------------- Menu principal --------------------------	*
			nav#menu{
				display: none;
			}
			nav#menuenc{
				display: block;
			}
		/*Fim Menu principal*/

		/* --------------------- Figura rotativa index --------------------------	
			figure#imagem{
				display: none;
			}
		/*Fim Figura rotativa index*/
		
		/* --------------------- Conteúdo --------------------------
			section#conteudo{
				width: 90%;
				margin-bottom: 0px;
			}

			/* --------------------- Página Angélica Cobo --------------------------
				div#ang{
					border: 1px solid;
					height: 350px;
				}
		
				div#foto_angelica{
					position: relative;
					float: left;
					margin: 10px 10px 10px 5%;
					border: 1px solid;
					padding: 10px 10px 10px 10px;
					/*padding-left: 15px;
					width: 80%;
					height: 55%;
				}
		
				picture#foto_ang img{
					height:100%;
					width:100%;
				}			
			/*Fim Página Angélica Cobo*/
			
		/*Fim conteúdo*/

		/* --------------------- Footer rodapé --------------------------	
			footer#rodape{
				width: 86%;
				margin-left: 5%;
				margin-top: 0px;
			}
			footer#rodape div#instagram{
				width: 80%;
			}
			footer#rodape div#facebook{
				width: 80%;
			}
			footer#rodape div#sobre{
				width: 80%;
			}
		/*Fim Footer Rodapé*/

		/* --------------------- Form Orcamento --------------------------	

			input {
				width: 80%;
			}
			textarea{
				width: 80%;
			}
		/*Fim Form Orcamento*/
		
		/* --------------------- galeria --------------------------	
		
			div#foto-ampliada img#imagem-ampliada{
				width: 70%;
				height: 40%;
				margin-left: 15%;
				top: 30%;
			}
		/*Fim Galeria*/
	/*}*/
/*Fim Visualização abaixo 400px*/

/* --------------------- Visualização abaixo de 800px --------------------------*/
	@media(max-width: 800px){
		html, body{
			overflow-x: hidden;
			margin: 0;
  			padding: 0;
  			height: 100%;
		}
		/* --------------------- Cabeçalho --------------------------*/
			div#news{
				height: 25px;
				width: 100%;
				z-index: 900;
				transition: opacity 0.3s ease;
			}
			.marquee{
				width: 100%;
				overflow: hidden;
 			 	white-space: nowrap;
  				box-sizing: border-box;
			}
			.marquee h3 {
				display: inline-block;
				padding-left: 100%;
				animation: scroll-left 5s linear infinite;
				margin-top: 0px;
			}
			.marquee h3 a{
				color: #9c8753;
			}
			@keyframes scroll-left {
				0% {
					transform: translateX(0%);
				}
				50% {
    		transform: translateX(-50%); /* pause for a moment */
  				}
				100% {
					transform: translateX(-50%);
				}
			}

			header#cabecalho{
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 190px;
				background-color: white;
				transition: transform 0.3s ease;
				z-index: 1000;	
			}
			header#cabecalho img#logo{	
				height: 150px;
				width: auto;
				transform: translateX(-10px);
			}
			figure#imagem{
				position: relative;
				margin-top: 0px;
				height: auto;
				/*height: 500px;*/
			}
			figure#imagem img{
				margin-top: 0px;
			}
		/* --------------------- Fim Cabeçalho --------------------------*/
			/* --------------------- Menu principal --------------------------*/	
				nav#menu{
					display: none;
				}
	
				nav#menuenc{
					display: block;
					top: 10px;
					left:-30px;
				}


			nav#menuenc ul li ul li{
				font-size: 17px;	
				width: 100px;
				background-color: rgb(253, 229, 216);
				opacity: 0.8;
			}

		/*Fim Menu principal*/

		/* --------------------- Página index --------------------------*/
			article#principal div#newsletter{	
				position:relative;
				width: 100%;

			}	
			article#principal div#logoindex{	
				display: flex;
				flex-direction: column;
				position: relative;
				justify-content: center;
				align-items: center;
				width: 100%;
			}	
			article#principal div#logoindex img{
				max-width: 60%;
				max-height: 60%;
				height: auto;
				width: auto;
				display: block;
				margin: 0 auto; 
			}	
			article#principal div#logoindex a img{
				margin-top: -30px;
				width: 60%;
			}

		/* --------------------- Fim Página index --------------------------*/
		/* --------------------- Página Quem somos --------------------------*/
			
			article#principal{
				margin-top: 0px;
			}
			article#principal div#quemsomos div#historia {
				position: relative;
				right: 5%;
				margin-right: 5px;
				margin-left: 15px;
				margin-bottom: 0px;
				padding: 30px;
				padding-bottom: 0px;
				width: 76%;
			}				

			article#principal div#quemsomos div#fotoquemsomos{
				position: relative;
				top: 0px;
				left: 0px;
				margin: 10px 25px 5px 5px;
				width: 35%;
			}


			article#principal div#comotrabalhamos div#historia {
				position: relative;
				right: 5%;
				margin-right: 5px;
				margin-left: 15px;
				margin-bottom: 0px;
				padding: 30px;
				padding-bottom: 0px;
				width: 76%;
			}
			article#principal div#comotrabalhamos div#fotocomotrabalhamos{
				position: relative;
				top: 0px;
				left: 0px;
				margin: 10px 25px 5px 5px;
				width: 35%;
			}
	
			picture#foto_ang img{
				height:100%;
				width:100%;
			}			
		/*Fim Página Angélica Cobo*/
		/* --------------------- Página contato --------------------------*/	
		article#principal div#contato{
			margin: 0px;
			padding-left: 10px;
		}
		/* --------------------- FIM Página contato --------------------------*/	
		/*--------------------- DIV Whatsapp --------------------------*/
			div#wpp{
				position: fixed;
				left: 90%;
				top: 90%;
			}
		/*Fim DIV Whatsapp*/
		footer#rodape{
			bottom: -140px;
		}
	}
/*Fim Visualização abaixo 800px*/
/* --------------------- Visualização abaixo de 1000px --------------------------
	@media(max-width: 1000px){
		
		header#cabecalho{
			position: fixed;
			width: 100%;
			height: 20%;
			z-index: 1000;
			background-color: rgb(255, 255, 255)
;
		}
		
		header#cabecalho img#logo{
			top: 20px;
			width: auto;
			height: 80%;
			left: 21%;
		}

		figure#imagem{
			position: relative;
			padding-top: 100px;
		}
	}