@charset "utf-8";
/*!
 * CSS3
 * FRAMEBASE v1 (http://www.dudacaletti.com.br)
 * Copyright 2014
 * No Licensed
 * Developer: Eduardo Petry Caletti
 * E-mail: contato@dudacaletti.com.br
 */

 
/* ==========================================================================
   //// OBSERVAÇÕES GERAIS
   
   - OBS 1: #38312d será a cor padrão para todos os seletores.
   - OBS 2: O posicionamento padrão dos objetos será left.
   - OBS 3: Esse CSS será derivado para templates.
   
   
   //// OBSERVAÇÕES HTML 5 E CSS3
      
   - HEADER: define o cabeçalho.
   
   - NAV: define o menu ou a navegação do site.
   
   - ARTICLE: define uma parte da página que tem uma composição de formulários, 
   textos etc. Por exemplo, pode ser um post de forum, blog, comentários etc.
   
   - SECTION: define uma seção do layout em um determinado element. Ele pode
   conter um header e também um footer se preciso.
   
   - ASIDE: consiste em envolver informações que tem algo a ver com o conteúdo
   principal do site. Pode ser um menu lateral, um sidebar padrão com menu, 
   banner, busca etc.
   
   - FOOTER: define o rodapé do elemento ou do layout.
   ========================================================================== */


/* ==========================================================================
   *
   ========================================================================== */
	*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* ==========================================================================
   end *
   ========================================================================== */





   
/* ==========================================================================
   HTML
   ========================================================================== */
	html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* ==========================================================================
   end HTML
   ========================================================================== */






/* ==========================================================================
   BODY
   ========================================================================== */
	body { margin: 0; padding: 0; font: Arial; }
	html, body { height:100%; }
/* ==========================================================================
   end BODY
   ========================================================================== */






/* ==========================================================================
   SELETORES
   ========================================================================== */

    h1, h2, h3, h4, h5, h6, p, span { margin: 0; padding: 0; font-weight: normal; }  
   
	/* === CABEÇALHO H1 === */
	h1			{ color: #38312d; }
	h1.amarelo 	{ color: #FC0; }
	h1.azul		{ color: #09C; }
	h1.branco	{ color: #FFF; }
	h1.laranja	{ color: #F90; }
	h1.roxo		{ color: #936; }
	h1.verde	{ color: #690; }
	h1.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H1 === */


	/* === CABEÇALHO H2 === */
	h2			{ color: #38312d; }
	h2.amarelo 	{ color: #FC0; }
	h2.azul		{ color: #09C; }
	h2.branco	{ color: #FFF; }
	h2.laranja	{ color: #F90; }
	h2.roxo		{ color: #936; }
	h2.verde	{ color: #690; }
	h2.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H2 === */


	/* === CABEÇALHO H3 === */
	h3			{ color: #38312d; }
	h3.amarelo 	{ color: #FC0; }
	h3.azul		{ color: #09C; }
	h3.branco	{ color: #FFF; }
	h3.laranja	{ color: #F90; }
	h3.roxo		{ color: #936; }
	h3.verde	{ color: #690; }
	h3.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H3 === */


	/* === CABEÇALHO H4 === */
	h4			{ color: #38312d; }
	h4.amarelo 	{ color: #FC0; }
	h4.azul		{ color: #09C; }
	h4.branco	{ color: #FFF; }
	h4.laranja	{ color: #F90; }
	h4.roxo		{ color: #936; }
	h4.verde	{ color: #690; }
	h4.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H4 === */


	/* === CABEÇALHO H5 === */
	h5			{ color: #38312d; }
	h5.amarelo 	{ color: #FC0; }
	h5.azul		{ color: #09C; }
	h5.branco	{ color: #FFF; }
	h5.laranja	{ color: #F90; }
	h5.roxo		{ color: #936; }
	h5.verde	{ color: #690; }
	h5.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H5 === */


	/* === CABEÇALHO H6 === */
	h6			{ color: #38312d; }
	h6.amarelo 	{ color: #FC0; }
	h6.azul		{ color: #09C; }
	h6.branco	{ color: #FFF; }
	h6.laranja	{ color: #F90; }
	h6.roxo		{ color: #936; }
	h6.verde	{ color: #690; }
	h6.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H6 === */


	/* === SPAN === */
	span		{ color: #38312d; }
	span.amarelo { color: #FC0; }
	span.azul	{ color: #09C; }
	span.branco	{ color: #FFF; }
	span.laranja{ color: #F90; }
	span.roxo	{ color: #936; }
	span.verde	{ color: #690; }
	span.vermelho{ color: #fff; }
	/* === end SPAN === */


	/* === PARÁGRAFO === */
	p			{ color: #38312d; }
	p.amarelo 	{ color: #FC0; }
	p.azul		{ color: #09C; }
	p.branco	{ color: #FFF; }
	p.laranja	{ color: #F90; }
	p.roxo		{ color: #936; }
	p.verde		{ color: #690; }
	p.vermelho	{ color: #C00; }
	/* === end PARÁGRAFO === */


	/* === SELETOR DE TIPO === */
	i			{ color: #38312d; }
	i.amarelo 	{ color: #FC0; }
	i.azul		{ color: #09C; }
	i.branco		{ color: #FFF; }
	i.laranja	{ color: #F90; }
	i.roxo		{ color: #936; }
	i.verde		{ color: #690; }
	i.vermelho	{ color: #C00; }
	/* === end SELETOR DE TIPO === */


	/* === NEGRITO === */
	strong { font-weight: bold; }
	/* === end NEGRITO === */

	/* === MARCADOR === */
	mark { color: #38312d; background: #ff0; }
	/* === end MARCADOR === */

	/* === SMALL === */
	small { font-size: 80%; }
	/* === end SMALL === */

	/* === HR === */
	hr { color: #ccc; height: 0; -moz-box-sizing: content-box; box-sizing: content-box; }
	/* === end HR === */

	/* === TABLE === */
	table { border-spacing: 0; border-collapse: collapse; }
	/* === end TABLE === */

	/* === DESTACAR TEXTO === */
	blockquote { color: #fff; background-color: #38312d; padding: 5px; margin: 10px 0 10px 0; } 
	/* === end DESTACAR TEXTO === */

	/* === ADDRESS === */
	address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } 
	/* === end ADDRESS === */

	.link-url 	{ color: #fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; text-decoration: none; transition: all ease 0.5s; }
	.link-url:hover 	{ color: #c7b575; }	
	
	
	
	
	
	
/* ==========================================================================
   end SELETORES
   ========================================================================== */





   
/* ==========================================================================
   NAV MENU
   ========================================================================== */

/* ==========================================================================
   end NAV MENU
   ========================================================================== */ 
   


   
   

/* ==========================================================================
   IMG
   ========================================================================== */
	img.logo		{ height: 140px; margin-left: 2%; }	
	img.circle		{ border-radius: 50%; }
	img.padrao		{ margin: 0 0 20px 0; }
	img.flutuante	{ max-width: 100%; margin: 0 20px 20px 0; float: left; }
	
	img.icon-redes-sociais		{ width: 40px; height: 40px; margin: 0 0 10px 0; border-radius: 100px; padding: 3px; transition: all ease 0.5s; border: 2px solid #fff; }
	img.icon-redes-sociais:hover	{ background-color:#3f76af; transition: all ease 0.5s; border: 2px solid #fff; }		
	img.risco { height: 340px; width: 3px; }
	img.separador { margin: 10px 0 10px 0; }
	img.banner { width: 100%; margin: 0 0 -5px 0; }
	img.logorodape { height: 150px; }
	

	img.icon-redes-menu		{ width: 40px; height: 40px; margin: 30px 0 0 0; border-radius: 100px; padding: 3px; transition: all ease 0.5s; border: 2px solid #fff; }
	img.icon-redes-menu:hover	{ background-color:#3f76af; transition: all ease 0.5s; border: 2px solid #fff; }	

	img.logorodape { height: 150px; float: left; position: absolute; left: 140px; z-index: 1; top: 160px; }
	img.imagemrodape { height: 580px; float: right; position: absolute; right: 0; bottom: 10px; }
	
	img.rodape { width: 100%; margin: 0 0 -5px 0; z-index: 33333; }
	img.banner-top { width: 100%; }
	
	img.iconmapa { height: 25px; float: left; margin: 0 5px 0 0; }
	img.icontelefone { height: 25px; float: left; margin: 0 10px 0 0; }
	
	img.especial { width: 100%; }
	img.flutuante-especial { width: 550px; float: left; margin: 0 20px 0 0; }
	img.banner-cerveja { width: 100%; margin-bottom: -5px; }
	
/* ==========================================================================
   end IMG
   ========================================================================== */




  .box-whats { width: auto; height: auto; position: fixed; z-index: 2222; bottom: 20px; right: 20px; display: block; }
   	.box-whats img { width: 50px; }	
   	



/* ==========================================================================
   FORMULÁRIOS PADRÃO
   ========================================================================== */
    .camponews { width: 100%; margin: 0 0 5px 0; border: 3px solid #FFF; background-color:#38312d; font-size: 0.9em; font-family: 'Open Sans', sans-serif; outline: 0; padding: 15px; color:#dbddfa;  }	
    .botaonews { width: 100%; border: 1px solid #38312d; border-bottom: 3px solid #fff; background-color:#38312d; padding: 14px; font-size: 1.1em; font-family: 'Oswald', sans-serif; color:#fff; outline: 0; letter-spacing: 2px; cursor: pointer;}

  	input { color:#fff; }
	::-webkit-input-placeholder { color: #fff; }
	:-moz-placeholder { color: #fff; }
	::-moz-placeholder { color: #fff; }
	:-ms-input-placeholder { color: #fff; }
   
 
  	.camponews input { color:#fff; }
	.camponews::-webkit-input-placeholder { color: #fff; }
	.camponews:-moz-placeholder { color: #fff; }
	.camponews::-moz-placeholder { color: #fff; }
	.camponews:-ms-input-placeholder { color: #fff; }

    .campoform50 { width: 49.8%; margin: 0 0 5px 0; border: 3px solid #38312d; background-color:#fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; padding: 15px; color:#38312d; outline: 0; }	
    .campoform30 { width: 33%; margin: 0 0 5px 0; border: 3px solid #38312d; background-color:#fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; padding: 15px; color:#38312d; outline: 0; }	
    .campoform100 { width: 100%; margin: 0 0 5px 0; border: 3px solid #38312d; background-color:#fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; padding: 15px; color:#38312d; outline: 0; }	
    .botaoform1 { width: auto; padding: 0; border: 1px solid #fff; background-color:#fff; font-size: 1.1em; font-family: 'Oswald', sans-serif;  color:#38312d; text-decoration: none; transition: all ease 0.5s; outline: 0; letter-spacing: 2px; cursor: pointer;}
		
	.box-form-botao { width: 100%; height: auto; float: left; position: relative; text-align: right; margin: 5px 0 0 0; }
	
  	input { color:#38312d; }
	::-webkit-input-placeholder { color: #38312d; }
	:-moz-placeholder { color: #38312d; }
	::-moz-placeholder { color: #38312d; }
	:-ms-input-placeholder { color: #38312d; }	


   .camporota { width: 45.1%; margin: 0 0 0 0; border: 1px solid #38312d; background-color:#fff; font-size: 0.9em; font-family: 'Raleway', sans-serif; padding: 15px; color:#777; outline: 0;  }
   .botaoform { width: auto; padding: 15px; border: 1px solid #38312d; background-color:#38312d; font-size: 0.9em; font-family: 'Oswald', sans-serif; color:#fff; margin: 0 0 0 0; outline: 0;  }



   .textoIvoti {padding: 0px 120px;}


 
/* ==========================================================================
   end FORMULÁRIOS PADRÃO
   ========================================================================== */







/* ==========================================================================
   DIVS ID e CLASSES ESTRUTURAIS HTML5
   ========================================================================== */
	#main, #top, #header, #banner, #cerveja-box, #menu, #slide, #barbearia, #cerveja, #content, #servicos, #rodape, #footer, #copyright { width: 100%; height: auto; position: relative; float: left;	}
	#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15 { width: 100%; height: auto; position: relative; float: left;	}
	.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15 { width: 100%; height: auto; position: relative; float: left;	}
	header, header-home, content, content#box-cerveja, footer { width: 100%; height: auto; position: relative; float: left;	}
	
	
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-center { text-align: center; }
	
	header { padding: 70px 0 0 0; position: relative; z-index: 2222; text-align: center; }
	header.home { padding: 70px 0 0 0; position: absolute; z-index: 1; text-align: center; }
	#slide { height: 100%; }
	#cervaja-box { padding: 0; margin: 0; background-color:#fff; }

	#box1 { padding: 40px 0 40px 0; background-color:#fff; }
	#box2 { padding: 40px 0 40px 0; background-color:#38312d; }
	#box3 { padding: 40px 0 40px 0; background-color:#fff; }
	#barbearia { padding: 100px 0 100px 0; background-color:#fff; z-index: 1; }
	#servicos { padding: 60px 0 0 0; background-color:#38312d; z-index: 1; }
	#cerveja { padding: 100px 0 100px 0; background-color:#fff; z-index: 1; }

	content { padding: 0 0 30px 0; background-color:#fff; }
	content#box-cerveja { padding: 0; background-color:#fff; }
	
	
	footer { clear: both; padding: 60px 0 60px 0; background-color: #38312d; z-index: 1; }
	
	
	.box-menu { width: auto; height: auto; float: left; position: relative; left: 490px; }
	
	.mapa { width: 100%; height: auto; float: left; position: relative;  }
	.mapa p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 20px; }		
	
	.espaco { margin: 0 300px 0 0; }
	
	.box-footer { width: 100%; height: auto; float: left; position: relative;  }
	.box-footer h1	{ font-family: 'Oswald', sans-serif;  text-transform: uppercase; font-size: 1.4em; color: #fff; }
	.box-footer h2	{ font-family: 'Oswald', sans-serif;  font-size: 1.4em; color: #fff; margin: 10px 0 30px 0; }
	.box-footer p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff; line-height: 20px; }		
	
	.box-rodape1 { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-rodape1 p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff;  }
	
	.box-resposta { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 30px; }
	.box-resposta h4	{ font-family: 'Oswald', sans-serif; font-size: 1.2em; color: #38312d; border-top: 5px solid #38312d; padding: 10px 0 0 0;  }	
	
	
	.box-rodape2 { width: 100%; height: auto; float: left; position: relative;  }
	.box-rodape2 h1	{ font-family: 'Oswald', sans-serif;  text-transform: uppercase; font-size: 1.4em; color: #fff; }
	.box-rodape2 h2	{ font-family: 'Oswald', sans-serif;  font-size: 1.4em; color: #fff; margin: 10px 0 30px 0; }
	.box-rodape2 p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff; line-height: 20px; }		
	
	.box-risco { width: 1%; height: auto; float: left; position: relative; }
	
	.box-rodape3 { width: 49%; height: auto; float: left; position: relative; padding: 30px 30px 30px 50px; }
	.box-rodape3 h1	{ font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.4em; color: #fff; }
	.box-rodape3 h2	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #fff; margin-top: 10px; }
	.box-rodape3 p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff; margin-bottom: 10px; line-height: 20px; }
	
	
	.box-rodape4 { width: 100%; height: auto; float: left; position: relative; margin-top: 40px; }
	.box-rodape4 h1	{ font-family: 'Raleway', sans-serif; font-size: 1.3em; color: #fff; margin-bottom: 5px; }
	.box-rodape4 p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff; margin-bottom: 5px; line-height: 20px; }
	
	.box-redes { width: 100%; height: auto; float: left; position: relative; text-align: center; bottom: -450px; }
	.box-redes h2	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #fff; margin: 10px 0 10px 0; }
	.box-redes p	{ font-family: 'Raleway', sans-serif; font-size: 0.9em; color: #fff; }	
	
	.box-logo { width: 100%; height: auto; float: left; position: relative; text-align: center; left: -20px; top: 100px; margin: 0 0 -120px 0; }


	h1.contagem { font-family: 'Oswald', sans-serif; font-size: 1.2em; color:#38312d; line-height: 25px; margin: -5px 0 0 0; }
	span.highlight { font-family: 'Oswald', sans-serif;  font-size: 4em; text-transform: uppercase; color:#38312d; }

	
	.box-content { width: 100%; height: auto; float: left; position: relative; text-align: center; }
	.box-content h1	{ font-family: 'Oswald', sans-serif;  font-size: 2.5em; color: #38312d; }
	.box-content p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }		
	
	.box-conteudo-site { width: 100%; height: auto; float: left; position: relative; margin-bottom: 30px; }
	.box-conteudo-site h1	{ font-family: 'Oswald', sans-serif;  font-size: 2.5em; color: #38312d; }
	.box-conteudo-site p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }	
	
	.box-subcontent { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-subcontent h1	{ font-family: 'Oswald', sans-serif;  font-size: 2em; color: #38312d; }
	.box-subcontent p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }		

	.box-conteudo { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-conteudo h1	{ font-family: 'Oswald', sans-serif;  font-size: 5em; color: #38312d;  }
	.box-conteudo h2	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #38312d; margin-bottom: -30px; }
	.box-conteudo p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }	
	
	.box-icone-contagem { width: 100%; height: auto; float: left; position: relative; text-align: center; }
	img.icon-contagem { height: 85px; margin-bottom: -5px; margin-top: 30px; }
	img.separador-conteudo { width: 100px; margin: 20px 0 30px 0; }
	
	.box-conteudo-branco { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-conteudo-branco h1	{ font-family: 'Oswald', sans-serif;  font-size: 5em; color: #fff; }
	.box-conteudo-branco h2	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #fff; margin-bottom: -30px; }
	.box-conteudo-branco p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #ccc; line-height: 24px; }	

	.box-unidade { width: 100%; height: auto; float: left; position: relative; padding: 15px; border-top: 1px solid #38312d; border-bottom: 1px solid #38312d; text-align: left; }
	.box-unidade p	{ font-family: 'Oswald', sans-serif; font-size: 1em; color: #38312d; line-height: 24px; }	


	.box-rota { width: 100%; height: auto; float: left; position: relative; padding: 20px 0 20px 0; }


	
	
	.box-link { width: 100%; height: auto; float: left; position: relative; text-align: center; margin: 10px 0 40px 0; }
	.box-link h3	{ width: 300px; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #38312d; border-top: 3px solid #38312d; padding: 10px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-link:hover h3	{ width: 300px; background-color:#38312d; color:#fff;  text-decoration: none; transition: all ease 0.5s; }

	.box-lista { width: 100%; height: auto; float: left; position: relative; text-align: center; margin: 10px 0 20px 0; }
	.box-lista h3	{ width: 300px; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #38312d; border-bottom: 3px solid #38312d; padding: 10px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-lista:hover h3	{ width: 300px; background-color:#38312d; color:#fff;  text-decoration: none; transition: all ease 0.5s; }


	.box-grounge { width: 100%; height: 100px; float: left; position: relative; background:url(../jpg/grounge.png) center top no-repeat; z-index: 1; margin-bottom: -3px; }
	.box-grounge1 { width: 100%; height: 100px; float: left; position: relative; background:url(../jpg/grounge1.png) center top no-repeat; z-index: 1; margin-top: -3px; }
	.box-grounge-branco { width: 100%; height: 100px; float: left; position: relative; background:url(../jpg/groungebranco.png) center top no-repeat; z-index: 1; margin: -100px 0 0 0; }

	.box-video-text { width: auto; height: auto; float: left; position: absolute; z-index: 8888; left: 20px; top: 580px; border-left: 5px solid #fff; padding: 10px 0 10px 20px; }
	.box-video-text h1	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #fff; line-height: 50px;  text-shadow: 1px 1px 1px #38312d; margin-bottom: 15px; }
	.box-video-text h2	{ font-family: 'Oswald', sans-serif;  font-size: 1.6em; color: #fff; text-shadow: 1px 1px 1px #38312d; }

	img.recorte { z-index: 1111; height: 800px; position: absolute; float: left; margin: 0 0 0 -50px; z-index: 2222; }
	img.recorte1 { z-index: 1111; height: 400px; position: absolute; float: right; right: 0; }
	img.recorte2 { z-index: 1111; height: 400px; position: absolute; float: right; right: 0; top: 0; }
	img.recorte3 { z-index: 1111; height: 800px; position: absolute; float: right; right: 0; top: 0; z-index: 2222; }
	
	.box-servicos { width: 100%; height: auto; float: left; position: relative; margin: 30px 0 0 0; }
	
	img.selo { height: 200px; }
	img.icone-servicos { height: 140px; }
	img.cerveja { height: 200px; margin-bottom: 10px; }
	
	.box-responsivo { width: 100%; float: left; overflow: hidden; height: 350px; z-index: 1; margin-bottom: 10px; }
	.box-responsivo img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: auto; transition: all ease 0.5s; z-index: 1; }	
	.box-portfolio-home { width: 50%; height: auto; float: left; position: relative; text-align: center; transition: all ease 0.5s; background-color:#38312d; }
	.box-portfolio-home h1	{ font-family: 'Oswald', sans-serif; font-size: 1.5em; color: #fff; transition: all ease 0.5s; text-transform: uppercase;  }
	.box-portfolio-home:hover { background-color:#fff; transition: all ease 0.5s;  }
	.box-portfolio-home:hover  h1	{ font-family: 'Oswald', sans-serif; font-size: 2em; color: #38312d; transition: all ease 0.5s; }
	.box-portfolio-home img { width: 100%; -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000);  -webkit-filter:grayscale(100%);}
	.box-portfolio-home:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);  -webkit-filter:grayscale(0%); }		
	
	.box-galeria-fotos { width: 100%; height: auto; float: left; position: relative; margin: 0 0 30px 0; }
	
	.box-galeria { width: 33%; float: left; overflow: hidden; height: 200px; z-index: 1; padding: 2px; }
	.box-galeria img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: auto; transition: all ease 0.5s; z-index: 1; }		
	
	
	.box-link1 { width: 100%; height: auto; float: left; position: relative; text-align: center; margin: 10px 0 20px 0; }
	.box-link1 h3	{ width: 450px; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #fff; border-top: 3px solid #fff; padding: 10px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-link1:hover h3	{ width: 450px; background-color:#fff; color:#38312d;  text-decoration: none; transition: all ease 0.5s; }	
	
	.box-video { width: 100%; height: auto; float: left; position: relative; padding: 150px 0 150px 0; text-align: center; }
	.box-video-texto { width: 100%; height: auto; float: left; position: relative; text-align: center; z-index: 1111;  }
	.box-video-texto h1	{ font-family: 'Oswald', sans-serif; font-size: 3em; color: #fff; z-index: 1111; text-shadow: 1px 1px 1px #38312d; }
	
	.box-rodape-imagem { width: 100%; height: auto; float: left; position: relative; z-index: 3333; }
	
	.box-news { width: 100%; height: auto; float: left; position: relative; margin: 10px 0 0 0; }
	
	.menu-desktop { width: 100%; height: auto; float: left; position: relative;  }
	.menu-mobile { width: 100%; height: auto; float: left; position: relative; display: none; }	
	
	#banner-desktop  { width: 100%; height: 100%; float: left; position: relative;  }
	#banner-mobile  { width: 100%; height: 100%; float: left; position: relative; display: none;  }
	
	
	.box-aplicativo { width: 100%; height: auto; float: left; position: relative; margin: 0 0 50px 0; }
	.box-aplicativo h1	{ font-family: 'Oswald', sans-serif;  font-size: 2em; color: #fff; text-decoration: none; transition: all ease 0.5s; }
	.box-aplicativo:hover h1	{ color: #ccc; text-decoration: none; transition: all ease 0.5s; }
	img.icone-aplicativo { height: 40px; float: left; margin: 5px 10px 0 0; }


	.box-espaco { width: 100%; height: auto; float: left; position: relative; margin: 0 0 30px 0; }
	.box-form { width: 100%; height: auto; float: left; position: relative; margin: 0 0 30px 0; }

	
 	.box-team { width: 100%; float: left; overflow: hidden; height: 190px; z-index: 1; margin: 0 0 10px 0; }
	.box-team img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 190px; transition: all ease 0.5s; z-index: 1; }		
	
	.box-teamcontent { width: 100%; height: auto; float: left; position: relative; text-align: center; margin: 0 0 20px 0; }
	.box-teamcontent h1	{ font-family: 'Oswald', sans-serif;  font-size: 1.1em; color: #fff; background-color:#38312d; padding: 10px; text-transform: uppercase; text-decoration: none; transition: all ease 0.5s; }
	.box-teamcontent h2	{ font-family: 'Oswald', sans-serif; font-size: 0.9em; color:#38312d; border-top: 1px solid #fff; border-bottom: 4px solid #fff; padding: 5px; text-decoration: none; transition: all ease 0.5s; }
	.box-teamcontent img { width: 100%; -webkit-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -moz-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -ms-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); -o-transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); transition: all .8s cubic-bezier(.190, 1.000, .220, 1.000); }
	.box-teamcontent:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); }
	.box-teamcontent:hover h1	{ font-family: 'Oswald', sans-serif;  font-size: 1.1em; color: #38312d; background-color:#fff; padding: 10px; text-transform: uppercase; text-decoration: none; transition: all ease 0.5s; }
	.box-teamcontent:hover h2	{ font-family: 'Oswald', sans-serif; font-size: 0.9em; color:#38312d; border-top: 1px solid #38312d; border-bottom: 4px solid #38312d; padding: 5px; text-decoration: none; transition: all ease 0.5s; }
	
	
  	button.md-trigger { width: 100%; height: auto; float: left; position: relative; border: 1px solid #fff; padding: 0; margin: 0; background-color:#fff; transition: all ease 0.5s; cursor: pointer; outline: 0; }
	
	button.md-trigger1 { width: 100px; height: auto; float: left; position: relative; color: #b094b8; font-family: 'Oswald', sans-serif;  font-size: 1em; border: 1px solid #251e27; border-top: 1px solid #362c39; background-color:#251e27; transition: all ease 0.5s; cursor: pointer; outline: 0; font-family: 'Oswald', sans-serif; width: 100%; padding: 5px; margin: 15px 0 0 0;  }
	button.md-trigger1:hover { color: #fff; background-color:#251e27; outline: 0; border-top: 1px solid #fff; }		

	button.md-trigger2 { width: 100px; height: auto; float: left; position: relative; color: #251e27; font-family: 'Oswald', sans-serif;  font-size: 1em; border: 1px solid #fff; border-top: 1px solid #ededec; background-color:#fff; transition: all ease 0.5s; cursor: pointer; outline: 0; font-family: 'Oswald', sans-serif; width: 100%; padding: 20px 5px 5px 5px; margin: 15px 0 0 0;  }
	button.md-trigger2:hover { color: #b094b8; border-top: 1px solid #b094b8; outline: 0; }	

	
	button.md-close { color: #38312d; font-family: 'Oswald', sans-serif; font-size: 1.2em; border: 1px solid #fff; background-color:#fff; transition: all ease 0.5s;  cursor: pointer; margin: 15px 0 0 0; outline: 0; }
	button.md-close:hover { color: #38312d; outline: 0; }	
   
   img.foto-modal { width: 250px; height: auto; float: left; margin: 0 20px 0 0; }	
	
	
	.box-agendamento-titulo { width: 100%; height: auto; float: left; position: relative; text-align: left; }
	.box-agendamento-titulo p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }	
	
	.box-agendamento-area { width: 100%; height: auto; float: left; position: relative; text-align: left; }
	.box-agendamento-area h2	{ font-family: 'Oswald', sans-serif; font-size: 1em; color: #38312d; line-height: 24px; }		
	
	
	
	.box-agendamento { width: 48%; height: auto; float: left; position: relative; }
	img.logo-app { width: 100%; }
	
	
 	.servicos-especiais { width: 100%; float: left; height: auto; position: relative; border: 2px solid #38312d; padding: 10px; text-decoration: none; transition: all ease 0.5s; background-color:#38312d; }
 	.servicos-especiais:hover { width: 100%; float: left; height: auto; position: relative; border: 2px solid #fff; background-color:#fff; padding: 10px; text-decoration: none; transition: all ease 0.5s; }
	
	iframe { z-index: 1; }
	
	img.foto-modal { display: none; }
	.md-content { padding: 20px; }
	
/* ==========================================================================
   end DIVS ID e CLASSES ESTRUTURAIS
   ========================================================================== */



 .menu{
  width: 1060px;
  height: 40px;
  margin: 0 auto;
  position: relative;
  background-color:#38312d;
  border-radius: 10px;
  padding: 5px;
}
.menu ul{
  list-style: none;
}
.menu .current a { color:#fff;  }
.menu a:hover {
    color:#fff;
	-webkit-transition: all ease 0.5s;
}

.menu li{
  float: left;
}
.menu li a{
  display: block;
  padding: 3px 0;
  font-size: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #BBBBBB;
  margin: 0 10px 0 0;
  width:140px;
  text-align: center;
 font-family: 'Oswald', sans-serif;	-webkit-transition: all ease 0.5s;
}
.menu li:nth-child(3){
  margin-right: 120px;
}
.menu li:nth-child(6) a{
  margin-right: 0;
}
.menu li:nth-child(1n+4) a{
  text-align: right;
}
.logo{
  width: 170px;
  height: 170px;
  background-image: url(../png/logo.png);
  background-size: 170px 170px;
  position: absolute;
  left: 445px;
  top: -60px;
}  
   
   



/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */
	[class*='col-'] { float: left; padding-right: 20px; }
	[class*='col-']:last-of-type { padding-right: 0px; }
	.grid { width: 100%; max-width: 1250px; min-width: 755px; margin: 0 auto; }
	.grid:after { content: ""; display: table; clear: both; }
	.grid-pad { padding: 0 0 0 20px; }
	.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
	.push-right { float: right; }
/* ==========================================================================
   end GRID SYSTEM
   ========================================================================== */






/* ==========================================================================
   CONTENT COLUNAS
   ========================================================================== */
	.col-1-1				{ width: 100%; }
	.col-2-3, .col-8-12		{ width: 66.66%; }
	.col-1-2, .col-6-12		{ width: 50%; }
	.col-1-3, .col-4-12		{ width: 33.33%; }
	.col-1-4, .col-3-12		{ width: 25%; }
	.col-1-5				{ width: 20%; }
	.col-1-6, .col-2-12		{ width: 16.667%; }
	.col-1-7				{ width: 14.28%; }
	.col-1-8				{ width: 12.5%; }
	.col-1-9				{ width: 11.1%; }
	.col-1-10				{ width: 10%; }
	.col-1-11				{ width: 9.09%; }
	.col-1-12				{ width: 8.33%; }
/* ==========================================================================
   end CONTENT COLUNAS
   ========================================================================== */






/* ==========================================================================
   LAYOUT COLUNAS
   ========================================================================== */
	.col-11-12		{ width: 91.66%; }
	.col-10-12		{ width: 83.333%; }
	.col-9-12		{ width: 75%; }
	.col-5-12		{ width: 41.66%; }
	.col-7-12		{ width: 58.33%; }
/* ==========================================================================
   end LAYOUT COLUNAS
   ========================================================================== */


   



   
/* ==========================================================================
   MEDIA QUERIES 767px
   ========================================================================== */
	@media handheld, only screen and (max-width: 767px) {
	.grid { width: 100%; min-width: 0; margin:0; }
	[class*='col-'] { width: auto; float: none; margin: 0; }

	.text-left { text-align: center; }
	.text-right { text-align: center; }
	.text-center { text-align: center; }			


	.box-video-text { display: none; }

	.box-whats { width: auto; height: auto; position: fixed; z-index: 2222; bottom: 20px; right: 20px; display: block; }
   	.box-whats img { width: 50px; }	
   	

	.box-link h3	{ width:  100%; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #38312d; border-top: 3px solid #38312d; padding: 10px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-link:hover h3	{ width:  100%; background-color:#38312d; color:#fff;  text-decoration: none; transition: all ease 0.5s; }

	.box-lista h3	{ width:  100%; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #38312d; border:none; padding: 0px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-lista:hover h3	{ width:  100%; background-color:#38312d; color:#fff;  text-decoration: none; transition: all ease 0.5s; }

	.box-link1 h3	{ width: 100%; font-family: 'Oswald', sans-serif;  font-size: 1em; color: #fff; border-top: 3px solid #fff; padding: 10px; margin: 0 auto;  text-decoration: none; transition: all ease 0.5s; }
	.box-link1:hover h3	{ width: 100%; background-color:#fff; color:#38312d;  text-decoration: none; transition: all ease 0.5s; }	
	.box-portfolio-home { width: 100%; height: auto; float: left; position: relative; text-align: center; transition: all ease 0.5s; background-color:#38312d; }
		.box-video-texto h1	{ font-family: 'Oswald', sans-serif; font-size: 1.5em; color: #fff; z-index: 5555; text-shadow: 1px 1px 1px #38312d; }

	img.logorodape { display: none; }
		
	.box-rodape2 { width: 100%; height: auto; float: left; position: relative; padding: 30px 50px 30px 30px; text-align: left; }
	.box-rodape3 { width: 100%; height: auto; float: left; position: relative; padding: 30px 50px 30px 30px; text-align: left; }
	.box-risco { display: none; }
		
    .camponews { width: 100%; margin: 0 0 5px 0; border: 3px solid #FFF; background-color:#38312d; font-size: 0.9em; font-family: 'Open Sans', sans-serif; outline: 0; padding: 15px; color:#dbddfa;  }	
    .botaonews { width: 100%; border: 1px solid #38312d; border-bottom: 3px solid #FFF; background-color:#38312d; padding: 14px; font-size: 1em; font-family: 'Oswald', sans-serif; color:#fff; outline: 0; letter-spacing: 2px; cursor: pointer; }		
	
	.box-redes { display: none; }
	.box-logo { display: none; }


	.box-grounge { display: none; }
	.box-grounge1 { display: none; }
	.box-responsivo { height: 150px;}

	.textoIvoti {padding: 0px 0px;}


	header { position: relative; padding: 20px 0 20px 0; background-color:#38312d; }
	header.home { padding: 20px 0 20px 0; position: relative; z-index: 2222; background-color:#38312d; text-align: center; }
	
	
	
img.logomobile { height: 90px; margin: 0 0 10px 0; }
	
	
	.menu-desktop { width: 100%; height: auto; float: left; position: relative; display: none; }
	.menu-mobile { width: 100%; height: auto; float: left; position: relative; display: block;  }	
	#slide { height: 100%; position: relative; }
	
	
	
	img.recorte { display: none; }
	img.recorte1 { display: none; }
	img.recorte2 { display: none; }
	img.recorte3 { display: none; }	
	
	.box-conteudo { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-conteudo h1	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #38312d;  }
	.box-conteudo h2	{ font-family: 'Oswald', sans-serif;  font-size: 2em; color: #38312d; margin-bottom: 0px; }
	.box-conteudo p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #666; line-height: 24px; }	


	.box-conteudo-branco { width: 100%; height: auto; float: left; position: relative; text-align: center; margin-bottom: 20px; }
	.box-conteudo-branco h1	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #fff;  }
	.box-conteudo-branco h2	{ font-family: 'Oswald', sans-serif;  font-size: 2em; color: #fff; margin-bottom: 0px; }
	.box-conteudo-branco p	{ font-family: 'Raleway', sans-serif; font-size: 1.1em; color: #ccc; line-height: 24px; }	
	

	img.selo { height: 120px; }
	img.icone-servicos { height: 80px; }
	img.cerveja { height: 120px; margin-bottom: 10px; }
	.box-footer h2	{ font-family: 'Oswald', sans-serif;  font-size: 1.4em; color: #fff; margin: 5px 0 5px 0; }

	.separador-rodape { width: 100%; height: auto; float: left; position: relative; margin-bottom: 35px; }

	.box-aplicativo h1	{ font-family: 'Oswald', sans-serif;  font-size: 1.3em; color: #fff; text-decoration: none; transition: all ease 0.5s; }
	img.icone-aplicativo { height: 90px; float: left; margin: 5px 20px 0 0; }

	.box-espaco { width: 100%; height: auto; float: left; position: relative; margin: 0 0 30px 0; }
    .campoform50 { width: 100%; margin: 0 0 5px 0; border: 3px solid #38312d; background-color:#fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; padding: 15px; color:#38312d; outline: 0; }	
    .campoform30 { width: 100%; margin: 0 0 5px 0; border: 3px solid #38312d; background-color:#fff; font-family: 'Raleway', sans-serif; font-size: 0.9em; padding: 15px; color:#38312d; outline: 0; }	

   img.foto-modal { width: 100%; height: auto; float: left; margin: 0 0 10px 0; }	
	
	
   .camporota { width: 100%; margin: 0 0 5px 0; border: 1px solid #38312d; background-color:#fff; font-size: 0.9em; font-family: 'Raleway', sans-serif; padding: 15px; color:#777; }
   .botaoform { width: 100%; padding: 15px; border: 1px solid #38312d; background-color:#38312d; font-size: 0.9em; font-family: 'Oswald', sans-serif; color:#fff; margin: 0 0 0 0; }	
	
	.box-form-botao { width: 100%; height: auto; float: left; position: relative; text-align: center; margin: 10px 0 30px 0; }

	.box-agendamento { width: 50%; height: auto; float: left; position: relative; padding: 10px; }

	.box-galeria { width: 100%; float: left; overflow: hidden; height: 170px; z-index: 1; padding: 2px 0px; }
	.box-galeria img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 170px; transition: all ease 0.5s; z-index: 1; }			
	
	.box-agendamento-area { width: 100%; height: auto; float: left; position: relative; text-align: left; margin: 30px 0 0 0; }
	

	.box-agendamento { width: 50%; height: auto; float: left; position: relative; text-align: center; }
	img.logo-app { width: 100%; }

	
	#banner-desktop { display: none; }
	#slide { height: auto; }
	#banner-mobile { width: 100%; height: auto; float: left; position: relative; background:url(../jpg/bannermobile.jpg) center center no-repeat; display: block; padding: 150px 0 150px 0; }
	#banner-mobile h1	{ font-family: 'Oswald', sans-serif;  font-size: 3em; color: #fff; padding: 0; text-align: center; line-height: 60px; text-shadow: 1px 2px 3px #38312d; }
	#banner-mobile h2	{ font-family: 'Oswald', sans-serif;  font-size: 1.5em; color: #fff; padding: 0; text-align: center; line-height: 60px; text-shadow: 1px 2px 3px #38312d; }

	img.foto-modal { display: none; }
	.box-modal { width: 100%; height: 300px; float: left; position: relative; overflow: auto; padding: 15px; }
	}
/* ==========================================================================
   end MEDIA QUERIES 767px
   ========================================================================== */
   
   
   

   
   
   
   
/* ==========================================================================
   NOTEBOOK
   ========================================================================== */  
 @media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  
	img.recorte { z-index: 1111; height: 470px; position: absolute; float: left; margin: 0 0 0 -10px; z-index: 2222; }
	img.recorte1 { z-index: 1111; height: 470px; position: absolute; float: right; right: 0; }
	img.recorte2 { z-index: 1111; height: 400px; position: absolute; float: right; right: 0; top: 0; }
	img.recorte3 { z-index: 1111; height: 550px; position: absolute; float: right; right: 0; top: 0; }
	img.logorodape { display:none; }
	.box-video-text { width: auto; height: auto; float: left; position: relative; z-index: 3; left: 20px; top: 300px; }

}  
/* ==========================================================================
   end NOTEBOOK
   ========================================================================== */  
   

   
/* ==========================================================================
   MOZILLA
   ========================================================================== */    
@media (max-width: 1600px) 
{
	img.recorte { z-index: 1111; height: 470px; position: absolute; float: left; margin: 0 0 0 -10px; z-index: 2222; }
	img.recorte1 { z-index: 1111; height: 470px; position: absolute; float: right; right: 0; }
	img.recorte2 { z-index: 1111; height: 400px; position: absolute; float: right; right: 0; top: 0; }
	img.recorte3 { z-index: 1111; height: 550px; position: absolute; float: right; right: 0; top: 0; }
	img.logorodape { display:none; }
	.box-video-text { width: auto; height: auto; float: left; position: relative; z-index: 3; left: 20px; top: 300px; }

}
/* ==========================================================================
   end MOZILLA
   ========================================================================== */