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

body{width:100%; background:rgb(240, 240, 240); padding: 0; margin: 0;}
*{outline:none; box-sizing: border-box;}
a{text-decoration:none; color: inherit; -webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}

.container{width: 100%; position: relative;}

.topo {position:fixed; bottom:0; right:10px; z-index:9999; width:50px; height:50px; cursor:pointer; display:none; font:20px/50px 'FontAwesome'; color:rgb(255,255,255);  background:rgb(48, 53, 61); text-align:center;}
#topo{width:100%; overflow:hidden; position:absolute;}
#banner{width:100%; max-height: 500px; position:relative; z-index:0;}
.fotos{width: 100%; height: 100%; background-size: cover;}

#logo{width:100%; max-width:800px;  margin:10px auto; position:relative; z-index:10;}
.tel{max-width: 600px; margin:0 auto; position:relative; z-index:10; margin-bottom: 10px;}
.tel h2{font:80px 'Pathway Gothic One', sans-serif; color:rgb(0, 0, 0); text-align: center; margin: 0;}

.menu{width:98%; max-width:1200px; margin:0 auto; font-size:0; background:rgb(255, 255, 255); position:relative; z-index:10;}
#mainmenu{width: 100%; background: rgb(255, 255, 255); margin:0; padding:0; }
#mainmenu li{width:20%; display:inline-block; position:relative; text-align:center; cursor:pointer;}
#mainmenu li a{font:20px/120px 'Carrois Gothic SC', sans-serif; border-right:1px solid rgb(240, 240, 240); display: block;}
#mainmenu li a:hover{background:rgb(76, 186, 125); color: rgb(255, 255, 255);}
#mainmenu li:last-child a{border:0;}

.menu select{display:none; border:0; border-radius:3px; padding:15px 5px; width:100%; font:18px/50px 'Carrois Gothic SC', sans-serif; color:rgb(255, 255, 255); margin:10px auto; background:rgb(50, 148, 99);}

#textos{width:98%; max-width:1200px; margin:0 auto; padding-top: 100px;}
#textos h1{font:50px 'Pathway Gothic One', sans-serif; color:rgb(50, 148, 99); text-transform:uppercase;}
#textos p{font:14px Arial; color:rgb(51, 51, 51);}
#textos p a{color:rgb(51, 51, 51);}
#textos p a:hover{color: rgb(76, 186, 125);}
#textos .utilitarios{width:25%; max-width:300px; float:left;}
#textos .utilitarios p{font:14px Arial; color:rgb(51, 51, 51); text-align:justify; margin:35px 5px;}
#textos .utilitarios 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;}
#textos .utilitarios p a{padding:10px 5px; border-radius:3px; text-align:center; cursor:pointer;}
#textos .utilitarios p a:hover{background:rgb(76, 186, 125); color:rgb(255, 255, 255);}
#textos div{width:50%; float:left; margin-bottom:50px;}
#textos div input{height:72px; border:0; padding:0 20px; font:16px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); border-bottom:3px solid rgb(50, 148, 99); margin-bottom:5px;}
#textos div input:focus, #textos div textarea:focus{border-bottom:3px solid rgb(76, 186, 125);}
#textos div input[name="nome"]{width:100%;}
#textos div input[name="email"]{width:49%; margin-right:1%; float:left;}
#textos div input[name="fone"]{width:50%; float:right;}
#textos div textarea{width:100%; resize:none; border:0; padding:20px; font:16px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); border-bottom:3px solid rgb(50, 148, 99); margin-bottom:5px;}
#textos div  button{width:25%; height:72px; background:rgb(50, 148, 99); border:0; color:rgb(255, 255, 255); float:right; cursor:pointer; border-radius:3px;}
#textos div  button[name="enviar"]{margin-right:5px;}
#textos div  button[name="enviar"]::before{font:30px 'FontAwesome'; content:"\f1d8";}
#textos div  button[name="limpar"]::before{font:30px 'FontAwesome'; content:"\f00d";}

#container{width:100%; overflow:hidden; padding:100px 0;}

#container01{width:98%; max-width:1200px; margin:0 auto}
#container01 .box{width:25%; float:left; padding:15px 10px; text-align:center; background:rgba(255, 255, 255, 0.7)}
#container01 .box .icone{width:100px; background:rgb(50, 148, 99); font:40px/100px 'Carrois Gothic SC', sans-serif ; color:rgb(255, 255, 255); border-radius:50%; text-align:center; margin:0 auto;}
#container01 .box h2{font:30px 'Pathway Gothic One', sans-serif; color:rgb(50, 148, 99); text-transform:uppercase;}
#container01 .box p{font:14px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container01 .box button{width:100px; height:50px;  background:rgb(50, 148, 99); border:0; border-radius:3px; color:rgb(255, 255, 255); margin-top:50px; font:14px 'Carrois Gothic SC', sans-serif; cursor:pointer;}
#container01 .box, #container01 .box .icone, #container01 .box button{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
#container01 .box:hover .icone, #container01 .box button:hover{background:rgb(76, 186, 125);}
#container01 .box:hover{background:rgb(255, 255, 255); -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); border-radius:3px;}

#container02{width:100%; max-width:1600px; background:url(imagens/02.jpg); padding:30px 0;}
#txt{width:98%; max-width:1200px; margin:0 auto; text-align:center;}
#txt h2{font:50px 'Pathway Gothic One', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase;}
#txt  p{font:14px 'Carrois Gothic SC', sans-serif; color:rgb(255, 255, 255);}

#container03{width:98%; max-width:1200px; margin:0 auto; overflow: hidden;}
#container03 .blocos{width:calc(50% - 30px); padding:20px 10px; float:left; margin:5px; cursor:pointer; background:rgba(255, 255, 255, 0.7); border-radius:3px; overflow:hidden;}
#container03 .blocos div{width:120px; background:rgb(50, 148, 99); font:65px/120px 'FontAwesome'; color:rgb(255, 255, 255); float:left; text-align:center; border-radius:50%; margin-right:10px; margin-bottom: 20px;}
#container03 .blocos h2{font:40px 'Pathway Gothic One', sans-serif; color:rgb(50, 148, 99); text-transform:uppercase; margin: 0; margin-top: 20px;}
#container03 .blocos p{font:14px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); margin: 0;}
#container03 .blocos:hover{background:rgb(255, 255, 255);}
#container03 .blocos{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}

#midia{width:100%; background:rgb(210, 210, 210); overflow:hidden; padding:20px 0;}
#container04{width:98%; max-width:1200px; margin:20px auto; overflow:hidden;}
#container04 div{width:120px; background:rgb(50, 148, 99); font:65px/120px 'FontAwesome'; color:rgb(255, 255, 255); float:left; text-align:center; border-radius:50%; margin-right:10px;}
#container04 h2{font:40px 'Pathway Gothic One', sans-serif; color:rgb(50, 148, 99); text-transform:uppercase; margin: 0;}
#container04 p{font:14px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container04 p a{color:rgb(51, 51, 51); font:14px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container04 p a::before{font:14px 'FontAwesome'; color:rgb(51, 51, 51); content:"\f023"; margin-right:5px;}
#container04 p a:hover{color:rgb(76, 186, 125);}
#container04 form{width:100%; overflow:hidden; margin-top:50px;}
#container04 input{width:25%; height:72px; border:0; padding:0 20px; font:16px 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); border-bottom:3px solid rgb(50, 148, 99);}
#container04 input:focus{border-bottom:3px solid rgb(76, 186, 125);}
#container04 button{width:11%; height:72px; background:rgb(50, 148, 99); border:0; color:rgb(255, 255, 255); float:right; cursor:pointer; border-radius:3px;}
#container04 button[name="enviar"]{margin-right:5px;}
#container04 button[name="enviar"]::before{font:30px 'FontAwesome'; content:"\f1d8";}
#container04 button[name="limpar"]::before{font:30px 'FontAwesome'; content:"\f00d";}

#container05{width:100%; background:rgb(48, 53, 61); overflow:hidden; padding-top:50px;}
#rodape{width:98%; max-width:1200px; margin:0 auto; text-align:center;}
#rodape h2{font:50px 'Poiret One', cursive;; color:rgb(255, 255, 255);}
#rodape p{font:14px/40px 'Carrois Gothic SC', sans-serif; color:rgb(255, 255, 255);}
#rodape p a{color:rgb(255, 255, 255);}
#rodape p a:hover{color:rgb(76, 186, 125);}
#social{width:100%; max-width:240px; margin:20px auto; overflow:hidden;}
#social div{width:50px; height:50px; float:left; border-radius:50%; margin:10px 5px; text-align:center; overflow:hidden; font:30px/50px 'FontAwesome'; color:rgb(255, 255, 255); background:rgb(76, 186, 125); cursor:pointer; box-shadow:0 4px 5px rgb(51, 51, 51) inset;}
#social div:nth-child(1)::before{content:"\f09a";}
#social div:nth-child(2)::before{content:"\f099";}
#social div:nth-child(3)::before{content:"\f0d5";}
#social div:nth-child(4)::before{content:"\f0e1";}

@media screen and (max-width:780px){
	#container01 .box{width:50%; margin-top:10px;}
	#container03 .blocos{width:calc(100% - 30px); float:none; overflow: hidden; display: block;}

}
@media screen and (max-width:680px){
	#container02{display:none;}
	#container04 input{width:100%; margin-bottom:10px;}
	#container04 button{width:20%;}
}
@media screen and (max-width:640px){
	#container01 .box{width:90%; float:none; margin:5px auto;}
	#container04 button{width:45%;}
	#textos div{width:100%; float:none;}
	#textos .utilitarios{width:50%;}
	#troca iframe{margin-top:50px;}
}
@media screen and (max-width:480px){
	#textos .utilitarios{width:100%;}
	#container{padding:50px 0;}
	#mainmenu{display:none;}
	.menu select{display:block;}
}