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

body{width:100%; background:rgb(240, 240, 240);}
*{margin:0; padding:0; outline:none;}
a{text-decoration:none;}
html{font-size:16px;}

.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(175, 30, 35); text-align:center;}
#topo{width:100%; overflow:hidden; position:relative;}
#banner{width:100%; position:absolute; z-index:0;}
#logo{width:100%; max-width:600px;  margin:10% auto; position:relative; z-index:10;}

#mainmenu{width:98%; max-width:1200px; margin:0 auto; font-size:0; background:rgb(255, 255, 255); position:relative; z-index:10;}
#mainmenu li{width:20%; display:inline-block; position:relative; text-align:center; cursor:pointer;}
#mainmenu li p{font:1.25rem/7.5rem 'Carrois Gothic SC', sans-serif; border-right:1px solid rgb(240, 240, 240);}
#mainmenu li, #mainmenu li p{-webkit-transition:all ease-out 300ms; -moz-transition:all ease-out 300ms; -ms-transition:all ease-out 300ms; -o-transition:all ease-out 300ms;}
#mainmenu li:hover{background:rgb(175, 30, 35);}
#mainmenu li:hover p{color:rgb(255, 255, 255);}
#mainmenu li:last-child p{border:0;}

#mainmenu2{width:calc(98% - 10px); font-size:0; background:rgb(255, 255, 255); display:none; position:relative; border-radius:3px; z-index:9999; padding:0 5px; margin:10px auto; z-index:100;}
#mainmenu2>li{width:100%; display:block;  font-size:16px; font:1rem/3.125rem 'Fira Sans' sans-serif; color:rgb(51, 51, 51); cursor:pointer; }
#mainmenu2>li>div:after{font-size:16px; font:1rem/3.125rem 'FontAwesome'; color:rgb(51, 51, 51); content:"\f0c9"; float:right;}
#sub-menu{width:100%; position:absolute; display:none; left:0;}
#sub-menu li{width:96%; background:rgb(255, 255, 255); border-top:1px solid rgb(51, 51, 51); padding:0 2%; list-style:none;}

#troca{width:100%; overflow:hidden;}
#textos{width:98%; max-width:1200px; margin:0 auto;  margin-bottom: 20px;}
#textos h1{font:3.125rem/6.25rem 'Pathway Gothic One', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
#textos p{font:0.875rem Arial; color:rgb(51, 51, 51);}
#textos p a{color:rgb(51, 51, 51);}
#textos p a:hover{color: rgb(175, 30, 35);}
#textos .utilitarios{width:25%; max-width:300px; float:left;}
#textos .utilitarios p{font:0.875rem 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(175, 30, 35); 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:1rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); margin-bottom:5px;}
#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:1rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51); margin-bottom:5px;}
#textos div  button{width:25%; height:72px; background:rgb(0, 0, 0); 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:1.875rem 'FontAwesome'; content:"\f1d8";}
#textos div  button[name="limpar"]::before{font:1.875rem 'FontAwesome'; content:"\f00d";}

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

#container01{width:98%; max-width:1200px; margin:0 auto}
#container01 .box{width:calc(25% - 20px); float:left; padding:15px 10px; text-align:center; background:rgba(255, 255, 255, 0.7)}
#container01 .box .icone{width:100px; background:rgb(0, 0, 0); font:2.5rem/6.25rem 'Carrois Gothic SC', sans-serif ; color:rgb(255, 255, 255); border-radius:50%; text-align:center; margin:0 auto;}
#container01 .box h2{font:1.875rem/6.25rem 'Pathway Gothic One', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
#container01 .box p{font:0.875rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container01 .box button{width:100px; height:50px;  background:rgb(0, 0, 0); border:0; border-radius:3px; color:rgb(255, 255, 255); margin-top:50px; font:0.875rem '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(175, 30, 35);}
#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:50px 0;}
#txt{width:98%; max-width:1200px; margin:0 auto; text-align:center;}
#txt h2{font:3.125rem/6.25rem 'Pathway Gothic One', sans-serif; color:rgb(255, 255, 255); text-transform:uppercase;}
#txt  p{font:0.875rem 'Carrois Gothic SC', sans-serif; color:rgb(255, 255, 255);}

#container03{width:98%; max-width:1200px; margin:0 auto;}
#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(0, 0, 0); font:4.062rem/7.5rem 'FontAwesome'; color:rgb(255, 255, 255); float:left; text-align:center; border-radius:50%; margin-right:10px;}
#container03 .blocos h2{font:2.5rem 'Pathway Gothic One', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
#container03 .blocos p{font:0.875rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container03 .blocos: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);}
#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(0, 0, 0); font:4.062rem/7.5rem 'FontAwesome'; color:rgb(255, 255, 255); float:left; text-align:center; border-radius:50%; margin-right:10px;}
#container04 h2{font:2.5rem/4.375rem 'Pathway Gothic One', sans-serif; color:rgb(0, 0, 0); text-transform:uppercase;}
#container04 p{font:0.875rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container04 p a{color:rgb(51, 51, 51); font:0.875rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container04 p a::before{font:0.875rem 'FontAwesome'; color:rgb(51, 51, 51); content:"\f023"; margin-right:5px;}
#container04 p a:hover{color:rgb(175, 30, 35);}
#container04 form{width:100%; overflow:hidden; margin-top:50px;}
#container04 input{width:25%; height:72px; border:0; padding:0 20px; font:1rem 'Carrois Gothic SC', sans-serif; color:rgb(51, 51, 51);}
#container04 button{width:11%; height:72px; background:rgb(0, 0, 0); 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:1.875rem 'FontAwesome'; content:"\f1d8";}
#container04 button[name="limpar"]::before{font:1.875rem '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:3.125rem 'Poiret One', cursive;; color:rgb(255, 255, 255);}
#rodape p{font:0.875rem/2.5rem 'Carrois Gothic SC', sans-serif; color:rgb(255, 255, 255);}
#rodape p a{color:rgb(255, 255, 255);}
#rodape p a:hover{color:rgb(175, 30, 35);}
#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:1.875rem/3.125rem 'FontAwesome'; color:rgb(255, 255, 255); background:rgb(175, 30, 35); 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:calc(50% - 20px); margin-top:10px;}
	#logo{margin:5% auto;}
	#container03 .blocos{width:calc(90% - 30px); float:none; margin:20px auto;}
}
@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:calc(90% - 20px); 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;}
	#mainmenu2{display:block;}
}