/*GERAIS*/
.animacao{-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
/*GERAIS*/

/*HOME*/
.banners {width: 100%; height: 700px; position: relative; overflow:hidden;}
.banners .slides li {height: 700px; position: relative; overflow:hidden;}
.banners .flex-control-nav {display: none;}

.mascara1 {width: 100%; height: 700px; background-color: #FFFFFF; opacity: 0.01; position: absolute; top: 0px;  overflow:hidden; } 
#itensprincipal {width: 100%; height: 700px; opacity: 1; position: absolute; z-index:1000; top: 0px; overflow:hidden; }
#itensprincipal ul{width: 100%; height: 225px; padding-top: 150px;}
#itensprincipal ul li{list-style: none; float: left; opacity: 1; margin: 0px 54px; width: 223px; height: 223px; border: 1px solid #FFFFFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
#itensprincipal ul li img{width: 80px; height: 90px; opacity: 1; left: 50%; margin-left: -40px; position: relative; margin-top: 45px; text-align: left;}
#itensprincipal ul li img:hover{width: 85px; height: 95px;}
#itensprincipal ul li p{font-family: Arial; font-size: 24px; color: #FFFFFF; font-weight: bold; text-align: center; letter-spacing: -1px;}
#itensprincipal .txt1{width: 100%; height: auto; padding-top: 50px; margin-top: 100px; <!-- border-top: 1px solid ; --> font-family: arial; font-size: 12px; color: #FFFFFF; text-align: center;}
/*HOME*/

/*EMPRESA*/
#um{width: 400px; float: left; margin: 0px 50px 40px;}
.banner1{width: 100%;}
/*EMPRESA*/

/*INSTAGRAM*/
ul.insta{width: 100%; height: auto; position: relative; padding-top: 50px; left: 0px;}
ul.insta li{width: 20%; height: 275px; float: left; list-style: none;}
ul.insta li img{width: 100%; height: 275px;}
/*INSTAGRAM*/

/*CLIENTES*/
ul.clientes{width: 100%; height: auto; margin-top: 80px; text-align: center;}
ul.clientes li{list-style: none; display: inline; margin: 0px 19px 50px;}
/*CLIENTES*/

/*CASES*/
ul.cases{width: 100%; height: auto; margin-top: 80px; position: relative;}
ul.cases li{list-style: none; float: left; border: 1px solid #d1cfcf; margin-right: 1px; width: 100px; height: 40px; cursor: pointer; overflow:hidden; }
ul.cases li:hover, ul.cases li.ativo{border: 1px solid #1D1D1B;}
ul.cases li img{width: 100px; height:40px; left: 50%; margin-left: -50px; position: relative;}
ul.cases li p{font-family: Arial; font-size: 12px; color: #1D1D1B; line-height: 40px; text-align: center; font-weight: bold;}
ul.cases2{width: 100%; height: auto;}
ul.cases2 li{list-style: none; float: left; width: 310px; height: 250px; margin: 20px 11px; cursor: pointer;}
ul.cases2 li .mascara2{width: 310px; height: 250px; position: absolute; background: url(../imagens/mascara2.png); display: none;}
ul.cases2 li .mascara2 p{font-family: Arial; font-size: 14px; color: #FFFFFF; font-weight: bold; text-align: center; line-height: 50px; width: 180px; height: 50px; left: 50%; margin-left: -90px; top: 50%; margin-top: -25px; position: relative; border: 2px solid #FFFFFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
ul.cases2 li img{width: 310px; height: 250px;}
/*CASES*/

/*CASES ATIVO*/
#cases_ativo{width: 100%; height: auto; padding-bottom: 60px; display: none;}
#cases_ativo .txt1{font-family: Arial; font-size: 13px; color: #555555; text-align: justify;}
#cases_ativo img{width: 300px; height: 250px; float: left; margin: 0px 20px 20px 0px;}
#cases_ativo .fechar{font-family: Arial; font-size: 14px; color: #1D1D1B; font-weight: bold; letter-spacing: -1px; border: 1px solid #1D1D1B; padding: 5px 10px; cursor: pointer; float: right; margin-top: 30px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
#cases_ativo .fechar:hover{color: #FFFFFF; background-color: #1D1D1B;}
/*CASES ATIVO*/

/*LOCALIZACAO*/
.mascara3{width: 100%; height: 80px; background-color: #FFFFFF; position: relative; z-index: 100; opacity:0.75; -moz-opacity: 0.75; filter: alpha(opacity=75);}
.mascara3 .txt3{width: 100%; height: 80px; padding-top: 20px;}
.mascara3 .txt3 h1{font-family: Arial; font-size: 18px; color: #555555; font-weight: bold; text-align: center;}
.mascara3 .txt3 p{font-family: Arial; font-size: 13px; color: #555555; text-align: center;}
#mapa{width: 100%; height: 430px; position: relative; padding-top: 50px; margin-top: -80px;}
.mapa{width: 100%; height: auto;}
.mapa img{width: 100%; height: auto;}
iframe{width: 100%; height: 450px;}
/*LOCALIZACAO*/

/*CONTATO*/
.bloco4{width:200px; height:auto; float:left; margin-right: 150px; margin-top: 45px;}
.bloco4 .telefones{width:300px; height:auto;}
.bloco4 .telefones h1{font-family: Arial; font-size: 14px; color:#1D1D1B}
.bloco4 .telefones h2{font-family: Arial; font-size: 14px; color:#717171; margin-top:5px;}
.bloco4 .telefones h2 a, .bloco4 .telefones a h2 { color:#717171; }
.bloco4 .horario{width:300px; height:auto; margin-top:16px;}
.bloco4 .horario h1{font-family: Arial; font-size: 14px; color:#1D1D1B margin-bottom:5px;}
.bloco4 .horario p{font-family: Arial; font-size: 12px; color:#717171; margin-top:5px;}
.bloco4 .local{width:300px; height:auto; margin-top:16px;}
.bloco4 .local h1{font-family: Arial; font-size: 14px; color:#1D1D1B}
.bloco4 .local h2{font-family: Arial; font-size: 14px; color:#717171; margin-top:5px;}
.bloco4 .local p{font-family: Arial; font-size: 12px; color:#717171; margin-top:5px;}
.bloco5{width:560px; height:580px; float:right;}
.bloco5 form .form2{width:560px; height:550px; margin:0 auto; padding-left: 50px; border-left: 1px solid #c0c0c0; padding-top: 16px; padding-bottom: 16px;}
.bloco5 form .labelTexto {width:200px; height:15px; margin:5px 0px; display:block; clear:both; font-family: Arial; font-size: 13px; color:#1D1D1B;}
.bloco5 form .form2 .mensagem{background: url(../imagens/enviar.png) no-repeat; width: 28px; height: 20px; position: absolute; margin-left: 8px; margin-top: 11px;}
.bloco5 form input[type=text]{width:500px; height:30px; padding:3px; float:left; margin-bottom:10px; font-family: Arial; font-size: 14px; color:#707070; border: 1px solid #c0c0c0; text-align: left;}
.bloco5 form select{width:510px; height:40px; padding:3px; float:left; margin-bottom:10px; font-family: Arial; font-size: 14px; color:#707070; border: 1px solid #c0c0c0; text-align: left; cursor: pointer;}
.bloco5 form textarea{width:500px; height:130px; padding:3px; float:left; margin-bottom:10px; border: 1px solid #c0c0c0; font-family: Arial; font-size: 12px; color:#707070; text-align: left;}
.bloco5 form select:focus, .bloco5 form textarea:focus, .bloco5 form input[type=text]:focus { border: 1px solid #1D1D1B;}
.bloco5 form input[type=button]{width:145px; height:40px; padding:5px 10px 5px 45px;  background-color:#1D1D1B; font-family: Arial; font-size: 12px; color:#FFFFFF; cursor: pointer; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
/*CONTATO*/

/* YOUTUBE */
.placeholder { min-height: 400px; margin: 20px 0px 60px 0px; padding: 11px 0; position: relative }
.placeholder:after { bottom: -30px; content: ""; height: 30px; left: 50%; margin-left: -510px; position: absolute; width: 1020px }
.placeholder iframe { display:block; height: 380px; margin: 0 auto 8px; width: 820px }
.placeholder h2 { color: #; font: 18px 'Arial'; text-align: center }

.slider { position: relative; left: -244px; width: 9999px; }
.slider li { list-style-type:none; float: left; height: 300px; margin-right: 1px; width: 243px }
.slider li a { display: block; height: 156px }
.slider li img { display: block; height: 136px; width: 243px }
.slider li h2 { font: 15px 'Arial'; color: #; margin-bottom: 8px; min-height: 40px; text-align: center; }
.slider li p { color: #; font-family:'Arial'; font-size: 13px; line-height: 17px; margin: 0 auto; text-align: center; width: 190px }

.carousel-container { margin: 0 auto; position: relative; width: 732px }
.carousel-container .controll { cursor: pointer; height: 54px; position: absolute; top: 54px; width: 29px; z-index: 5 }
.carousel-container .prev { background-position:0 0; cursor: pointer; z-index:100; background-image:url(../imagens/setas.png); width:20px; height:30px; position:absolute; left: -20px;}
.carousel-container .next { background-position:-20px 0; cursor: pointer; z-index:100; background-image:url(../imagens/setas.png); width:20px; height:30px; position:absolute; right: -20px;}
.carousel-inner { float: left; width: 732px; overflow: hidden; }
/* YOUTUBE */

@media screen and (max-width: 1020px) {
	/*HOME*/
	.mascara1 ul li{margin: 0px 7px; width: 215px; height: 215px;}
	.banners{display: none;}
	/*HOME*/
	/*EMPRESA*/
	#um{width: auto; float: left; margin: 0px 50px 40px;}
	/*EMPRESA*/
	/*CONTATO*/
	.bloco4{width:100%; height:auto; float: none; margin-right: 0px; margin-top: 0px; clear: both;}
	.bloco4 .telefones{width:auto; height:auto; margin-top:16px; float: left; margin-right: 45px;}
	.bloco4 .horario{width:auto; height:auto; margin-top:16px; float: left; margin-right: 45px;}
	.bloco4 .local{width:auto; height:auto; margin-top:16px; float: left; margin-right: 45px;}
	.bloco5{width:560px; height:580px; left: 50%; margin-left: -280px; position: relative; float: none; padding-top: 130px;}
	/*CONTATO*/
	.placeholder { min-height: auto; margin: 20px 0px 60px 0px; padding: 11px 0; position: relative }
	.placeholder iframe { display:block; height: auto; margin: 0 auto 8px; width: 100% }

	.placeholder:after { bottom: -30px; content: ""; height: 30px; left: inherit margin-left: inherit; position: absolute; width: auto; }

	.slider { position: relative; left: -244px; width: 9999px; }
	.slider li { list-style-type:none; float: left; height: 300px; margin-right: 10px; margin-left: 10px; width: 243px }
	.slider li a { display: block; height: 156px }
	.slider li img { display: block; height: 136px; width: 243px }
	.slider li h2 { font: 15px 'Arial'; color: #; margin-bottom: 8px; min-height: 40px; text-align: center; }
	.slider li p { color: #; font-family:'Arial'; font-size: 13px; line-height: 17px; margin: 0 auto; text-align: center; width: 190px }

	.carousel-container { margin: 0 auto; position: relative; width: 100% }
	.carousel-container .controll { cursor: pointer; height: 54px; position: absolute; top: 60px; width: 29px; z-index: 5 }
	.carousel-container .prev { background-position:0 0; cursor: pointer; z-index:100; background-image:url(../imagens/setas.png); width:20px; height:30px; position:absolute; left: -10px;}
	.carousel-container .next { background-position:-20px 0; cursor: pointer; z-index:100; background-image:url(../imagens/setas.png); width:20px; height:30px; position:absolute; right: -10px;}
	.carousel-inner { float: left; width: 100%; overflow: hidden; }

	
}
@media screen and (max-width: 700px) {
	.bloco5 form .form2{ border-left: none; }
}
@media screen and (max-width: 640px) {
	/*CONTATO*/
	.bloco4 .telefones{width:auto; height:auto; margin-top:16px; float: left; margin-right: 10px;}
	.bloco4 .horario{width:auto; height:auto; margin-top:16px; float: left; margin-right: 10px;}
	.bloco4 .local{width:auto; height:auto; margin-top:16px; float: left; margin-right: 10px;}	
	/*CONTATO*/
}
@media screen and (max-width: 480px) {
	/*HOME*/
	.banners {height: 550px;}
	.banners .slides li {height: 550px;}
	.mascara1{height: 550px;}
	#itensprincipal ul{padding-top: 120px;}
	#itensprincipal .txt1{padding-top: 30px; margin-top: 0px;}	
	/*HOME*/
	/*CLIENTES*/
	ul.clientes{width: 162px; height: auto; margin-top: 20px; left: 50%; margin-left: -81px; position: relative;}
	ul.clientes li{list-style: none; float: left; margin: 0px 0px 20px;}
	/*CLIENTES*/
	/*CASES*/
	ul.cases li { width: 96px; }
	ul.cases li img{width: 96px; height:auto; }
	ul.cases2 li{list-style: none; float: left; width: 310px; height: 250px; cursor: pointer; left: 50%; margin-left: -155px; position: relative;}
	/*CASES*/
	/*INSTAGRAM*/
	ul.insta li{width: 100%; height: 275px; float: left; list-style: none;}
	/*INSTAGRAM*/
	/*CONTATO*/
	.bloco5{width:300px; height: auto; left: 50%; margin-left: -150px; position: relative; float: none; margin-top: 20px;}
	.bloco5 form .form2{width:300px; height: auto; padding-left: 0px; border-left: none; margin-top: 40px; }
	.bloco5 form input[type=text]{width:300px; height:20px; padding-left:0px; padding-right:0px; text-align:center; }
	.bloco5 form select{width:308px; height: 30px; padding-left:0px; padding-right:0px; text-align:center; }
	.bloco5 form select option{width:100%; height: 30px; padding-left:0px; padding-right:0px; text-align:center; }
	.bloco5 form textarea{width:300px; height:70px; padding-left:0px; padding-right:0px; text-align:center; }
	/*CONTATO*/
}