@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;}
html{font-size:62.5%}

#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:320px; float:left; font:7rem/8rem 'Six Caps', sans-serif; text-transform:uppercase; color:rgb(51, 56, 58); text-align:center;}

#mainmenu{width:100%;  font-size:0; margin-right:10px;}
#mainmenu li{width:25%; display:inline-block; font:2rem/8rem  '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);}
#mainmenu li a:hover{color:rgb(38, 166, 91);}

.menu{width:60%; float:right;}
.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(38, 166, 91);}

#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:3rem/7rem '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:3rem/7rem '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(38, 166, 91);}

#slogan{width:100%; text-align:center; text-transform:uppercase;}
#slogan h2{font:3.5rem '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:2rem}

#container01{width:width:calc(100% - 20px); padding:70px 10px; overflow:hidden;}
#container01 .box{width:calc(50% - 30px); padding: 0 15px; float:left;}
#container01 .box h2{font:3.5rem/6rem 'Oswald', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
#container01 .box p{font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); text-align:justify;}
#container01 .box button{width:100px; height:60px; background:rgb(38, 166, 91); border:0; border-radius:2px; float:right; margin-top:20px; font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); cursor:pointer;}
#container01 .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:4rem 'Oswald', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase; padding:10px; background:rgb(38, 166, 91); margin-bottom:20px;}
#textos p{font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); text-align:justify;}
#textos .contato{width:50%; float:left;  margin-bottom:20px;}
#textos .contato form{width:100%; margin-top:5px;}
#textos .contato form input, textarea{padding:20px 10px; background:rgb(240, 240 ,240); border:0; border-radius:2px; font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); margin-bottom:5px; border-bottom:3px solid rgb(220, 220, 220);}
#textos .contato form input[name="nome"]{width:100%;}
#textos .contato form input[name="email"]{width:49%; margin-right:1%; float:left;}
#textos .contato form input[name="fone"]{width:50%; float:right;}
#textos .contato form textarea{width:100%;}
#textos .contato form button{width:25%; height:70px; border:0; border-radius:2px; background:rgb(38, 166, 91); color:rgb(255, 255, 255); font:3rem 'FontAwesome';  border-bottom:3px solid rgb(25, 122, 64); cursor:pointer;}
#textos .contato form button[name="enviar"]::before{content:"\f1d8";}
#textos .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;}
#container02 .blocos{width:calc(25% - 21px); padding:0 10px; float:left; border-right:1px solid rgba(240, 240, 240, 0.5);}
#container02 .blocos:last-child{width:calc(25% - 20px); border:0;}
#container02 .blocos div{width:100px; font:7rem/10rem 'FontAwesome'; color:rgb(240, 240, 240); margin:30 auto; text-align:center;}
#container02 .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);}
#container02 .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;}
#container02 .blocos h2{font:2.5rem/5rem 'Oswald', sans-serif; color:rgb(255, 255, 255); text-align:center;}
#container02 .blocos p{font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255); text-align:center; margin:30px 0;}
#container02 .blocos p a{color:rgb(255, 255, 255);}
#container02 .blocos p a:hover{color:rgb(38, 166, 91);}

#container03{width:100%; background:rgb(255, 255, 255); padding:50px 0;}
#container03 h2{font:3.5rem '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;}
#container03 .utilitarios{width:90%; margin:0 auto; overflow:hidden;}
#container03 .utilitarios div{width:25%; float:left;}
#container03 .utilitarios div p{font:1.6rem 'Archivo Narrow', sans-serif; color:rgb(51, 51, 51); margin:45px 0;}
#container03 .utilitarios div p a{color:rgb(51, 51, 51);}
#container03 .utilitarios div p a::before{content:"\f08e"; font:1.8rem 'FontAwesome'; margin-right:5px;}
#container03 .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;}
#container03 .utilitarios div p a{padding:20px 15px; border-radius:2px; text-align:center; cursor:pointer;}
#container03 .utilitarios div p a:hover{background:rgb(38, 166, 91); color:rgb(255, 255, 255);}

#container04{width:100%; background:rgb(240, 240, 240); padding:50px 0; overflow:hidden;}
#container04 .prog{width:calc(100% - 30px); padding:0 10px; float:left; margin:0 5px;}
#container04 .prog h2{font:3.5rem'Oswald', sans-serif; color:rgb(51, 56, 58); text-transform:uppercase; margin-top:10px;}
#container04 .prog h2 span{font-size:1.8rem}
#container04 .prog .icone{width:100px; height:100px; float:left; margin-right:10px; border-radius:50%; background:rgb(38, 166, 91); text-align:center;}
#container04 .prog .icone::before{content:"\f0ee"; font:5rem/10rem 'FontAwesome'; color:rgb(240, 240, 240);}
#container04 .prog form{width:100%; margin-top:30px;}
#container04 .prog form input{padding:30px 10px; font:1.6rem '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;}
#container04 .prog form input[name="cliente_documento"]{width:100%;}
#container04 .prog form input[name="user_mail"]{width:49%; margin-right:1%; float:left;}
#container04 .prog form input[name="user_senha"]{width:50%; float:right;}
#container04 .prog form input:focus{border-bottom:3px solid rgb(38, 166, 91);}
#container04 .prog form button{font:3rem 'FontAwesome'; color:rgb(255, 255, 255); height:70px; border:0; border-radius:2px; cursor:pointer;}
#container04 .prog form button[name="enviar"]{width:49%; margin-right:1%; float:left; background:rgb(38, 166, 91); border-bottom:3px solid rgb(25, 122, 64);}
#container04 .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);}
#container04 .prog form button[name="admin"]{width:25%; float:right; background:rgb(38,166,91); border-bottom:3px solid rgb(25, 122, 64);}
#container04 .prog[name="links"] div{width:calc(80% - 20px); padding:10px; margin:20px auto; background:rgb(51, 51, 51); border-radius:2px; text-align:center; cursor:pointer;}
#container04 .prog[name="links"] div h3{font:3rem/6.5rem 'Oswald', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase;}
#container04 .prog[name="links"] div p{font:1.4rem 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255);}
#container04 .prog[name="links"] 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;}
#container04 .prog[name="links"] div: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); background:rgb(38, 166, 91);}

#container05{width:100%; background:rgb(51, 51, 51); padding:50px 0; text-align:center;}
#container05 h2{font:6rem 'Poiret One', cursive; color:rgb(255, 255, 255);}
#container05 p{font:1.6rem/5rem 'Archivo Narrow', sans-serif; color:rgb(255, 255, 255);}
#container05 p a{color:rgb(255, 255, 255);}
#container05 p a:hover{color:rgb(38, 166, 91);}
#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(38, 166, 91); font:3rem/5rem '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);}
}