/* CSS Document */
/* =) */
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,200;0,400;0,500;1,200;1,500&display=swap');

*{margin:0; padding:0;}

html, body{height:100%;}

body{background-color:var(--cor-terciaria); font-family:'Aleo', serif, calibri, arial; font-size:20px; /*overflow-x:hidden; overflow-y:scroll;*/ line-height:26px; color:var(--cor-light-gray); text-align:left; font-weight:var(--fonte-light); font-style:italic;}

	img{border:0; float:left; position:relative;}

	div, article, section{float:left; position:relative;}


/* Variaveis */
:root{
	/* Cores */
	--cor-primaria:#9A8143; /* Gold */
	--cor-secundaria:#45553F; /* Verde */
	--cor-terciaria:#F6EFEA; /* Bege */
	--cor-light-gray:#555555; /* Cinza Claro */
	--cor-gray:#333333; /* Cinza */
	--cor-black:#222222; /* Preto */
	--cor-white:#FFFFFF; /* Branco */
	
	/* Fonte */
	--fonte-light:200;
	--fonte-regular:400;
	--fonte-medio:500;
	
	/* Radius */
	--radius-btn:20px;
	--radius-icon:24px;
	
	/* Motion */
	--motion-delay:.1s;
	--motion-duration:.3s;
	
	/* Grid */
	--margem-grid:6%;
	--grid-menor:38%;
	--grid-medio:50%;
	--grid-maior:60%;
}


/* Cores */
.txt-cor-primaria{color:var(--cor-primaria);}
.txt-cor-secundaria{color:var(--cor-secundaria);}
.txt-cor-terciaria{color:var(--cor-terciaria);}
.txt-cor-light-gray{color:var(--cor-light-gray);}
.txt-cor-gray{color:var(--cor-gray);}
.txt-cor-black{color:var(--cor-black);}
.txt-cor-white{color:var(--cor-white);}


/* Fontes */
h1{font-size:44px; line-height:48px; font-weight:var(--fonte-light); margin-left:-1px; font-style:normal;}

h2{font-size:30px; line-height:34px; font-weight:var(--fonte-light); margin-left:-2px; font-style:normal;}

p{font-size:20px; line-height:26px; font-weight:var(--fonte-light); font-style:italic;}

p.legenda{font-size:12px; line-height:16px; font-weight:var(--fonte-light); font-style:normal;}

a{text-decoration:none; color:var(--cor-primaria); opacity:1; transition-duration:var(--motion-duration); transition-delay:var(--motion-delay);}

b{font-weight:var(--fonte-medio);}


/* Botoes */
.btn{float:left; height:20px; background-color:var(--cor-primaria); cursor:pointer; padding:10px 50px 10px 20px; border-radius:var(--radius-btn); transition-duration:var(--motion-duration); transition-delay:var(--motion-delay); display:flex; justify-content:center; background-image:url("icon/icon-arrow-right.svg"); background-size:24px; background-position:center right 15px; background-repeat:no-repeat; font-size:15px; line-height:19px; font-weight:var(--fonte-regular); font-style:normal; color:var(--cor-terciaria); letter-spacing:0.3px;}
	
	.btn:hover{opacity:.9;}

.btn.btn-secundario{background-color:transparent; color:var(--cor-primaria); border:1px solid var(--cor-primaria);}

.btn.cta{background-color:var(--cor-secundaria); color:var(--cor-terciaria);}

.btn.btn-negative{background-color:var(--cor-terciaria); color:var(--cor-primaria);}

/* FIM DEFAULT */




/* HOME ------------------------------------------------------------------------------------------------------------------ */

/* LOAD */
#loading{width:100%; height:100%; background:#EEE; position:fixed; left:0; top:0; z-index:9999;}
#loadingb{width:47px; height:50%; margin:0 auto; margin-top:20%; float:none;}

#loadinganime{float:left; width:47px; height:47px; margin:0 0 0 0;}

    #loadinganime .logo{width:47px; height:47px; background-size:18px 18px; background-image:url("img/LogoLoading.svg"); background-position:center; animation:animacaoLoadingLogo 1.5s linear 0s infinite;}

    .dotbase{position:absolute; width:47px; height:47px; animation:animacaoLoading 0.7s linear 0s infinite;}

    #loadinganime .dot{position:absolute; right:8px; top:8px; width:5px; height:5px; background:#000; border-radius:100%;}

	@keyframes animacaoLoading{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
	}

    @keyframes animacaoLoadingLogo{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
	}



/* TOPO */
#topo{position:relative; width:calc(100% - (var(--margem-grid) * 2)); padding:0 var(--margem-grid); height:112px; z-index:9; background:var(--cor-white); border-top:4px solid var(--cor-primaria); display:flex; align-items:center; justify-content:space-between;}

	.logo{width:167px; height:71px; background-image:url(img/Logo.svg); background-repeat:no-repeat; margin-top:36px;}

	#menu{float:right; position:relative; text-align:right; padding:0; display:flex; align-items:center;}
    .menumobile{display:none;}

        #menu a{padding:10px 20px; margin-left:8px; font-size:18px; color:var(--cor-gray);}
		#menu a:last-child{padding:0; margin-left:22px;}
		#menu a:hover{opacity:.8;}



/* MENU MOBILE */
#menuopen{position:fixed; width:calc(80% - 44px); height:auto; z-index:9999; background:#FFF; top:0; margin:10px 0 0 10px; border-radius:4px; padding:24px 20px 24px 24px; transition:1s; box-shadow:10px 20px 40px -10px RGBA(0, 0, 0, .2);}

    .menuopen-close{left:-120%;}
    .menuopen-open{left:0;}

	#menuopen *{transition:0.3s;}

		.head-menumobile{width:100%; display:flex; justify-content:space-between; align-items:center;}

			.head-menumobile .menumobile{background-image:url("icon/icon-close.svg"); width:40px; height:40px;}

		#menuopen #menumobile a{color:var(--cor-gray);}

		.linksmenumobile{width:100%; height:auto; margin-top:28px;}

			.linksmenumobile a{float:left; width:100%; text-align:left; color:var(--cor-gray);}

		.socialmenumobile{width:100%; height:auto; margin-top:28px;}
		.socialmenumobileb{width:auto; height:48px;}

			.socialmenumobile .social-icon{margin:0 16px 0 0px;}



/* BANNER */
#banner-principal{position:relative; width:100%; height:auto; z-index:7; margin:0; padding:0; background-color:var(--cor-white); background-size:cover; background-position:center;}

	/* Largura do banner define demais larguras do componente */
	.figure-banner{position:relative; float:left; width:var(--grid-maior); height:calc(100%-40px); padding-top:40px;}

		.figure-banner div{background-size:cover; background-position:center;}
		.figure-banner-img-1{width:82%; height:480px}
		.figure-banner-img-2{position:absolute; right:0; bottom:-60px; width:50%; height:300px;}

    .content-banner{position:relative; float:left; width:calc(100% - var(--grid-maior) - (var(--margem-grid) * 2)); padding:0 var(--margem-grid); height:100%;}

		.title-mobile{display:none;}
        .content-banner h1{position:relative; width:76%; max-width:680px; margin-top:20%; z-index:9;}
		.content-banner p{margin:24px 0;}



/* CONTEÚDO HOME */
	/* Chamada Produtos */
	.content-page{margin:170px var(--margem-grid); display:flex; justify-content:space-between;}
		.content-carrossel{width:var(--grid-menor);}
			.content-carrossel p{margin:24px 0;}

		.carrossel-produtos-itens{width:calc(100% - var(--grid-menor) - var(--margem-grid)); height:440px;}


	/* Chamada Onde estamos */
	#onde-estamos{width:calc(100% - var(--margem-grid)); background:var(--cor-secundaria); padding:90px var(--margem-grid) 120px 0; color:var(--cor-terciaria);}
		#onde-estamos figure{padding-top:0px; margin-top:-150px;}


	/* Vou de Neko */
	#vou-de-neko{background:#C5533E; display:flex; justify-content:center; align-items:center; padding:30px var(--margem-grid); color:var(--cor-white);}
		#vou-de-neko article{flex-grow:1;}



/* RODAPÉ */
#rodape{position:relative; float:left; width:100%; padding:60px 0 0 0; background-color:var(--cor-white); z-index:4; display:flex; flex-direction:column; align-items:center;}

	footer > *{margin:20px 0;}

	.logo-footer{width:167px; height:189px; background-image:url("img/Logo-completo.svg");}

	.social-footer{display:flex;}
		.social-icon{width:48px; height:48px; background-image:url("icon/icon-facebook.svg"); background-position:center; background-repeat:no-repeat; border:1px solid var(--cor-primaria); border-radius:var(--radius-icon); margin:0 8px; transition-delay:var(--motion-delay); transition-duration: var(--motion-duration);}
		.social-icon:hover{opacity:.8;}

	#rodape nav{display:flex; flex-wrap:wrap; align-items:center;}
		#rodape nav a{margin:0 10px;}

    #foot{width:calc(100% - (var(--margem-grid) * 2)); background:#F7F7F7; padding:30px var(--margem-grid); font-size:12px; display:flex; justify-content:space-between; color:var(--cor-black); align-items:center; margin:40px 0 0 0;}

		.design-worbes{width:auto; height:40px; background-image:url(https://worbes.com.br/img/Logo.svg); background-size:200px 40px; background-repeat:no-repeat; padding-right:100px; background-position:top -4px right -110px; color:var(--cor-black); display:flex; align-items:center;}





/* INTERNA -------------------------------------------------------------------------------------------------------------------- */

/* BANNER */
#banner-principal.banner-interna{padding-bottom:80px;}

	.banner-interna .figure-banner{width:calc(var(--grid-medio) - var(--margem-grid)); padding:40px 0 0 var(--margem-grid);}
		.banner-interna .figure-banner-img-1{width:100%; height:620px;}

    .banner-interna .content-banner{width:calc(var(--grid-medio) - (var(--margem-grid) * 2));}


/* CONTEÚDO SOBRE NÓS */
	/* Nossa Historia */
	#nossa-historia.content-page{margin:100px var(--margem-grid);}
		#nossa-historia .content-carrossel{width:calc(var(--grid-medio) - var(--margem-grid));}
		#nossa-historia .carrossel-produtos-itens{width:var(--grid-medio); height:620px;}

	/* Nosso Mascote */
	#nosso-mascote.content-page{padding:80px var(--margem-grid); margin:0; background:var(--cor-white); flex-direction:row-reverse;}
		#nosso-mascote .content-carrossel{width:26%; padding-right:16%;}
		#nosso-mascote .carrossel-produtos-itens{width:calc(var(--grid-medio) - var(--margem-grid)); height:auto; background-image:url("img/sobre/mascote.svg"); background-position:center; background-repeat:no-repeat; background-color:transparent;}

	/* Pratos Premiados */
	#onde-estamos.pratos-premiados{width:calc(100% - (var(--margem-grid) * 2)); background:var(--cor-primaria); padding:90px var(--margem-grid) 120px var(--margem-grid); color:var(--cor-terciaria);}
		#onde-estamos figure{padding-top:0px; margin-top:-150px;}

		#onde-estamos.pratos-premiados .figure-banner-img-1{width:50%;}
		#onde-estamos.pratos-premiados .figure-banner-img-2{width:60%; height:350px;}


/* ENCONTRE A HAKKOPAN */
	/* Faça seu pedido */
	#vou-de-neko.faca-pedido{background:var(--cor-secundaria); color:var(--cor-terciaria);}
		#vou-de-neko.faca-pedido .btn{color:var(--cor-secundaria);}





@media screen and (max-width:1000px){ /* Responsive Smartphones ---------------------------------------------------------------------*/

/* HTML5 PADRÕES */
h1{font-size:36px; line-height:40px;}
    
/* LOAD */
#loadingb{height:40%; padding-top:50%;}

	

/* TOPO */
#topo{height:110px; flex-direction:row-reverse;}

	.logo{float:right;}

    #menu{display:none;}
    .menumobile{display:block; float:left; width:40px; height:40px; background-image:url(icon/icon-menu.svg); margin:-12px 0 0 -5px;}
	
	
/* BANNER */
#banner-principal{padding-bottom:60px;}

	.figure-banner{width:100%;}
	
		.figure-banner-img-1{width:96%; height:460px;}
		.figure-banner-img-2{width:70%; height:230px; bottom:-80px;}

    .content-banner{width:calc(100% - (var(--margem-grid) * 2)); padding:0 var(--margem-grid); margin-top:100px;}
	
		.title-mobile{display:block; margin:40px var(--margem-grid) 0;}
        .content-banner h1{display:none;}
    
	
	
/* CONTEÚDO HOME */
	/* Chamada Produtos */
	.content-page{margin:60px var(--margem-grid); flex-direction:column-reverse;}
		.content-carrossel{width:100%; margin:40px 0 80px 0;}
		.carrossel-produtos-itens{width:100%;}


	/* Chamada Onde estamos */
	#onde-estamos{padding:90px var(--margem-grid) 80px 0;}
		#onde-estamos article{margin-top:128px;}


	/* Vou de Neko */
	#vou-de-neko{background:#C5533E; display:flex; flex-direction:column; justify-content:flex-start; padding:60px var(--margem-grid); align-items:flex-start;}
		#vou-de-neko article{flex-grow:0; padding:0; margin:0;}
	
	
	
/* RODAPÉ */
	footer > *{margin:16px 0;}

	#rodape nav{flex-direction:column; align-items:center;}
		#rodape nav a{margin:12px 10px;}
	
	
    

/* INTERNA ------------------------------------------------------------ */

/* BANNER */
#banner-principal.banner-interna{padding-bottom:40px;}

	.banner-interna .figure-banner{width:96%; padding:40px 0 0 0;}
		.banner-interna .figure-banner-img-1{width:100%; height:380px;}

    .banner-interna .content-banner{width:calc(100% - (var(--margem-grid) * 2)); padding:0 var(--margem-grid); margin-top:28px;}
	

/* CONTEÚDO SOBRE NÓS */
	/* Nossa Historia */
	#nossa-historia.content-page{width:calc(100% - (var(--margem-grid) * 2)); margin:40px var(--margem-grid);}
		#nossa-historia .content-carrossel{width:100%; margin-bottom:0;}
		#nossa-historia .carrossel-produtos-itens{width:100%; height:420px;}

	/* Nosso Mascote */
	#nosso-mascote.content-page{width:calc(100% - (var(--margem-grid) * 2)); padding:20px var(--margem-grid); flex-direction:column-reverse;}
		#nosso-mascote .content-carrossel{width:100%; padding-right:0%; margin-top:0;}
		#nosso-mascote .carrossel-produtos-itens{width:100%; height:200px; background-size:contain;}

	/* Pratos Premiados */
	#onde-estamos.pratos-premiados{width:100%; padding:90px 0 40px 0;}
		#onde-estamos figure{padding-top:0px; margin-top:-150px;}

		#onde-estamos.pratos-premiados .figure-banner-img-1{width:calc(100% - var(--margem-grid));}
		#onde-estamos.pratos-premiados .figure-banner-img-2{width:70%; height:250px;}
	
	
/* ENCONTRE A HAKKOPAN */
	/* Banner e chamada */
	#banner-principal.banner-interna.encontre-nos{padding-bottom:80px;}
		#banner-principal.banner-interna.encontre-nos figure{display:none;}

	/* Faça seu pedido */
	#vou-de-neko.faca-pedido{background:var(--cor-secundaria); color:var(--cor-terciaria);}
		#vou-de-neko.faca-pedido .btn{color:var(--cor-secundaria);}


}