@charset "utf-8";
/*  CSS Document */

body{width:100%; background:rgb(51, 56, 58);}
*{margin:0; padding:0; resize:none; outline:none;}
a{text-decoration:none;}

#dots{ position:fixed; z-index:-1; background:url(../imagens/dots9.png); width:100%; height:120%; top:-20px; } 
#total{width:100%; position:reltaive; overflow:visible;}
#topo{width:95%; max-width:1200px; margin:0 auto; overflow:hidden; background:rgb(255, 255, 255); margin-top:20px; padding:20px 0;}
#logo{width:100%; max-width:260px; float:left;}

#mainmenu{width:100%;  font-size:0; margin-right:10px;}
#mainmenu li{width:25%; display:inline-block; font:20px/80px  'Oswald', sans-serif; color:rgb(51, 56, 58);  text-transform:uppercase; text-align:center; border-radius:3px;}
#mainmenu li a{color:rgb(51, 56, 58); padding: 20px; transition: all ease-out 300ms; -webkit-transition: all ease-out 300ms;}
#mainmenu li a:hover{background:rgb(255, 0, 0); color: rgb(255, 255, 255);}

.menu{width:60%; float:right; margin-top: 20px;}
.menu select{display:none; border:0; border-radius:3px; padding:15px 5px; width:100%; font:18px/50px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); margin:10px auto; background:rgb(51, 51, 51);}

#container{width:95%; max-width:1200px; overflow:hidden; position:relative; margin:0 auto; background:rgb(255, 255, 255);}
#banner{width:100%; position:relative; overflow:hidden; z-index:0;}
#fotos{width:100%; overflow:hidden;}
#next{width:70px; height:70px; position:absolute; right:70px;  bottom:0; background:rgb(255, 255, 255); color:rgb(51, 51, 51); font:30px/70px 'FontAwesome'; text-align:center; cursor:pointer; z-index:1000;}
#next::before{content:"\f105"}
#prev{width:70px; height:70px; position:absolute; right:140px; bottom:0; background:rgb(255, 255, 255); color:rgb(51, 51, 51); font:30px/70px 'FontAwesome'; text-align:center; cursor:pointer; z-index:1000;}
#prev::before{content:"\f104"}
#prev, #next{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
#prev:hover, #next:hover{color:rgb(255, 255, 255); background:rgb(51, 51, 51);}

#slogan{width:100%; text-align:center; text-transform:uppercase;}
#slogan h2{font:35px 'Oswald', sans-serif; color:rgb(51, 56, 58); width:90%; border-bottom:1px solid rgba(51, 51, 51,  0.3); margin:0 auto;  padding:30px 0; }
#slogan h2 span{font-size:20px}

#container01{width:width:calc(100% - 20px); padding:70px 10px; overflow:hidden;}
.box{width:calc(50% - 30px); padding: 0 15px; float:left;}
.box h2{font:30px/60px 'Oswald', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
.box p{font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); text-align:justify;}
.box button{width:100px; height:60px; background:rgb(51, 51, 51); border:0; border-radius:2px; float:right; margin-top:20px; font:16px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); cursor:pointer;}
.box button:hover{background:rgb(51, 51, 51);}

#conteudo{width:95%; max-width:1200px; margin:0 auto; overflow:hidden; background:rgb(255, 255, 255); padding:50px 0;}
#textos{width:calc(100% - 20px); padding: 0 10px;}
#textos h1{font:40px 'Oswald', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase; padding:10px; background:rgb(51, 51, 51); margin-bottom:20px;}
#textos p{font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); text-align:justify;}
.contato{width:50%; float:left;  margin-bottom:20px;}
.contato form{width:100%; margin-top:5px;}
.contato form input, textarea{padding:20px 10px; background:rgb(240, 240 ,240); border:0; border-radius:2px; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); margin-bottom:5px; border-bottom:3px solid rgb(220, 220, 220);}
.contato form input[name="nome"]{width:100%;}
.contato form input[name="email"]{width:49%; margin-right:1%; float:left;}
.contato form input[name="fone"]{width:50%; float:right;}
.contato form textarea{width:100%;}
.contato form button{width:25%; height:70px; border:0; border-radius:2px; background:rgb(51, 51, 51); color:rgb(255, 255, 255); font:30px 'FontAwesome'; cursor:pointer;}
.contato form button[name="enviar"]::before{content:"\f1d8";}
.contato form button[name="limpar"]::before{content:"\f00d";}

#corpo{width:95%; max-width:1200px; margin:0 auto;  background:rgb(255, 255, 255); overflow:hidden; margin-bottom:20px;}

#container02{width:100%; overflow:hidden; padding:130px 0; background:url(imagens/background.jpg); background-position-y:-300px;}
.blocos{width:calc(25% - 21px); padding:0 10px; float:left; border-right:1px solid rgba(240, 240, 240, 0.5);}
.blocos:last-child{width:calc(25% - 20px); border:0;}
.blocos div{width:100px; font:70px/100px 'FontAwesome'; color:rgb(240, 240, 240); margin:30 auto; text-align:center;}
.blocos:hover div{-webkit-transform:scale(1.2,1.2); -moz-transform:scale(1.2,1.2); -ms-transform:scale(1.2,1.2); -o-transform:scale(1.2,1.2);}
.blocos div{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
.blocos h2{font:25px/50px 'Oswald', sans-serif; color:rgb(255, 255, 255); text-align:center;}
.blocos p{font:16px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); text-align:center; margin:30px 0;}
.blocos p a{color:rgb(255, 255, 255);}
.blocos p a:hover{color:rgb(220, 220, 220);}

#container03{width:100%; background:rgb(255, 255, 255); padding:50px 0;}
#container03 h2{font:35px 'Oswald', sans-serif; color:rgb(51, 56, 58); width:90%; border-bottom:1px solid rgba(51, 51, 51,  0.3); margin:0 auto;  padding:30px 0; text-align:center; text-transform:uppercase;}
.utilitarios{width:90%; margin:0 auto; overflow:hidden;}
.utilitarios div{width:25%; float:left;}
.utilitarios div p{font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); margin:45px 0;}
.utilitarios div p a{color:rgb(51, 51, 51);}
.utilitarios div p a::before{content:"\f08e"; font:18px 'FontAwesome'; margin-right:5px;}
.utilitarios div p a{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
.utilitarios div p a{padding:20px 15px; border-radius:2px; text-align:center; cursor:pointer;}
.utilitarios div p a:hover{background:rgb(51, 51, 51); color:rgb(255, 255, 255);}

#container04{width:100%; background:rgb(240, 240, 240); padding:50px 0; overflow:hidden;}
.prog{width:calc(50% - 30px); padding:0 10px; float:left; margin:0 5px;}
.prog h2{font:35px'Oswald', sans-serif; color:rgb(51, 56, 58); text-transform:uppercase; margin-top:10px;}
.prog h2 span{font-size:18px}
.prog .icone{width:100px; height:100px; float:left; margin-right:10px; border-radius:50%; background:rgb(51, 51, 51); text-align:center;}
.prog .icone::before{content:"\f0ee"; font:50px/100px 'FontAwesome'; color:rgb(240, 240, 240);}
.prog form{width:100%; margin-top:30px;}
.prog form input{padding:30px 10px; font:16px 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); border:0; border-bottom:3px solid rgb(220, 220, 220); border-radius:2px; margin-bottom:5px;}
.prog form input[name="cliente_documento"]{width:100%;}
.prog form input[name="user_mail"]{width:49%; margin-right:1%; float:left;}
.prog form input[name="user_senha"]{width:50%; float:right;}
.prog form input:focus{border-bottom:3px solid rgb(51, 51, 51);}
.prog form button{font:30px 'FontAwesome'; color:rgb(255, 255, 255); height:70px; border:0; border-radius:2px; cursor:pointer;}
.prog form button[name="enviar"]{width:49%; margin-right:1%; float:left; background:rgb(51, 51, 51); border-bottom:3px solid rgb(0, 0, 0);}
.prog form button[name="limpar"]{width:24%; float:left; margin-right:1%; background:rgb(51, 51, 51); border-bottom:3px solid rgb(0, 0, 0);}
.prog form button[name="admin"]{width:25%; float:right; background:rgb(201, 71, 54); border-bottom:3px solid rgb(178, 64, 51);}
.prog[name="links"] a{width:calc(80% - 20px); padding:10px; margin:20px auto; background:rgb(51, 51, 51); border-radius:2px; text-align:center; display: block;}
.prog[name="links"] a h3{font:30px/65px 'Oswald', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase;}
.prog[name="links"] a p{font:14px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255);}
.prog[name="links"] a{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
.prog[name="links"] a:hover{-webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1);}

#container05{width:100%; background:rgb(51, 51, 51); padding:50px 0; text-align:center;}
#container05 h2{font:60px 'Poiret One', cursive; color:rgb(255, 255, 255);}
#container05 p{font:16px/50px 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255);}
#container05 p a{color:rgb(255, 255, 255);}
#container05 p a:hover{color:rgb(240, 240, 240);}
#social{width:280px; margin:0 auto; overflow:hidden; padding:10px 0;}
#social div{width:50px; height:50px; float:left; margin:0 10px; border-radius:50%; background:rgb(51, 51, 51); font:30px/50px 'FontAwesome'; color:rgb(255, 255, 255); text-align:center; box-shadow:1px 1px 5px rgb(51, 51, 51) inset; cursor:pointer;}
#social div[name="facebook"]::before{content:"\f09a";}
#social div[name="twitter"]::before{content:"\f099";}
#social div[name="linkedin"]::before{content:"\f0e1";}
#social div[name="plus"]::before{content:"\f0d5";}
#social div{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
#social div:hover{-webkit-transform:scale(1.2,1.2); -moz-transform:scale(1.2,1.2); -ms-transform:scale(1.2,1.2); -o-transform:scale(1.2,1.2);}

@media screen and (max-width:768px){
	#logo{float:none; margin:0 auto;}
	.menu{float:none; margin:0 auto; width:98%;}
	#container03 .utilitarios div{width:50%;}
}

@media screen and (max-width:640px){
	#container04 .prog{width:calc(100% - 30px);}
	#container02 .blocos{width:calc(50% - 21px);}
	#container02 .blocos:last-child{width:calc(50% - 20px);}
	#container02 .blocos:nth-child(2){width:calc(50% - 20px); border:0;}
	#container02{ background-position-y:0; padding:30px 0;}
	#textos .contato{width:100%; float:none;}
}

@media screen and (max-width:480px){
	#container01 .box{width:calc(100% - 30px); float:none;}
	#container01 .box button{margin-bottom:10px;}
	#container02 .blocos, #container02 .blocos:nth-child(2), #container02 .blocos:last-child{width:calc(100% - 20px); border:0;}
	#container03 .utilitarios div{width:100%;}
	#topo{overflow:visible;}
	#mainmenu{display:none;}
	.menu select{display:block;}
	#container04 .prog[name="links"] div{width:calc(90% - 20px);}
}

@media screen and (max-width:320px){
	#slogan, #banner{display:none;}
	#container04 .prog[name="links"] div{width:calc(100% - 20px);}
}