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

*{margin:0; padding:0; outline:none;}
body{width:100%; background:rgb(51, 51, 51);}
h1{ont-size:45px; font:2.812rem/3.75rem 'Poiret One', cursive; color:rgb(51, 51, 51);}
h2{font-size:25px; font:1.562rem 'Poiret One', cursive; color:rgb(171, 1, 2); margin:20px 0;}
h2 span{font-size:40px; font:2.5rem 'FontAwesome'; margin-right:5px;}
p{font-size:14px; font:0.875rem 'Fira Sans', sans-serif; color:rgb(51, 51, 51);}

#topo{width:98%; max-width:900px; margin:0 auto; overflow:hidden; background:rgb(240,240,240)}
#topo02{width:calc(30% - 20px); max-width:360px; float:left; padding:20px 10px; overflow:hidden; background:rgb(240, 240, 240);}
#logo{width:100%; max-width:270px; position:relative}
#container{width:70%; max-width:630px; float:right; overflow:hidden; position:relative;}
#banner{width:100%; max-width:630px; float:right; overflow:hidden;}
#next{width:50px; height:50px; position:absolute; top:50%; margin-top:-25px; right:0; background:rgb(172, 2, 2); z-index:1000; text-align:center; cursor:pointer; border-left:5px solid rgb(51 ,51, 51);}
#next:before{font-size:30px; font:1.875rem/3.125rem 'FontAwesome'; color:rgb(255, 255, 255); content:"\f105";}
#prev{width:50px; height:50px; position:absolute; top:50%; margin-top:-25px; left:0; background:rgb(172, 2, 2); z-index:1000; text-align:center; cursor:pointer; border-right:5px solid rgb(51 ,51, 51);}
#prev:before{font-size:30px; font:1.875rem/3.125rem 'FontAwesome'; color:rgb(255,255,255); content:"\f104";}

#mainmenu{width:100%; margin-top:25px; list-style:none;}
#mainmenu li{width:calc(100% - 20px); displya:inline; font-size:25px; font:1.562rem 'Poiret One', cursive; padding:15px 10px; border-bottom:1px solid rgb(0, 0, 0); cursor:pointer;}
#mainmenu li:nth-child(6){border-bottom:0;}
#mainmenu li:before{font-size:20px; font:1.125rem 'FontAwesome'; color:rgb(51, 51, 51); content:"\f101"; margin-right:10px;}
#mainmenu li:hover{background:rgb(172, 2, 2); color:rgb(255, 255, 255);}
#mainmenu li:hover:before{color:rgb(255, 255,255);}

#mainmenu2{width:calc(95% - 10px); font-size:0; background:rgb(248,248,248); display:none; position:relative;  z-index:9999; padding:0 5px; margin:10px auto;}
#mainmenu2>li{width:100%; display:block;  font-size:20px; font:1.25rem/3.125rem 'Poiret One', cursive; 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(248,248,248); border-top:1px solid rgb(51,51,51); padding:0 2%; list-style:none;}

#conteudo{width:98%; max-width:900px; margin:0 auto; overflow:hidden; background:rgb(255, 255, 255);}
#lateral{width:calc(30% - 20px); max-width:270px; float:left; padding:20px 10px; overflow:hidden; background:rgb(240, 240, 240);}
#lateral form{width:100%; margin:10px 0; overflow:hidden;}
#lateral form input{width:70%; float:left; padding:15px 5px; border:0; font-size:16px; line-height:30px;}
#lateral form button{width:30%; background:rgb(171, 1, 2); border:0; cursor:pointer; float:right; padding:20px 0;}
#lateral form button:before{font-size:20px; font:1.25rem 'FontAwesome'; content:"\f002"; color:rgb(255, 255, 255);}

#troca{width:70%; max-width:630px; float:right; overflow:hidden;}

#textos{width:calc(100% - 10px); max-width:630px; float:left; padding:20px 5px 20px 5px;}
#textos .blocos{width:calc(50% - 27px); padding:10px; margin:5px 5px 10px 0; float:left; border:1px solid rgba(51, 51, 51, 0.5); overflow:hidden; box-shadow:0 4px 0 rgba(51, 51, 51, 0.5);}
#textos .blocos:nth-child(2){width:calc(50% - 22px); margin-right:0;}
#textos .blocos:nth-child(4){width:calc(50% - 22px); margin-right:0;}
#textos .blocos button{width:80px; height:50px; background:rgb(171, 1, 2); border:0; float:right; margin:20px 0; color:rgb(255, 255, 255); cursor:pointer;}
#textos form{width:100%; overflow:hidden;}
#textos form input, textarea{padding:20px 10px; font-size:20px; font:1.25rem 'Poiret One', cursive; color:rgb(51, 51, 51); margin-bottom:5px;}
#textos form input[name="nome"], #textos form input[name="descricao"]{width:100%;}
#textos form input[name="empresa"], #textos form input[name="email"]{width:49%; float:left; margin-right:1%;}
#textos form input[name="fone"], #textos form input[name="cidade"]{width:50%; float:right;}
#textos form textarea{width:100%; resize:none;}
#textos form button{width:100px; height:80px; background:rgb(172, 2, 2); border:0; font-size:20px; font:1.25rem 'Poiret One', cursive; color:rgb(255, 255, 255); cursor:pointer;}

#rodape{width:calc(98% - 20px); max-width:880px; overflow:hidden; margin:0 auto; padding:20px 10px; background:rgb(240, 240, 240);}
#rodape>p{font-size:16px; font:1rem 'Poiret One', cursive; color:rgb(0, 0, 0); float:left;}
#rodape>p>a{color:rgb(0, 0, 0); text-decoration:none;}
#rodape>p>a:hover{color:rgb(172, 2, 2);}
#rodape>div{width:40px; height:40px; float:right;  text-align:center; background:rgb(60, 89, 159); cursor:pointer;}
#rodape>div:before{fon-size:25px; font:1.562rem/2.5rem 'FontAwesome'; content:"\f09a"; color:rgb(255, 255, 255);}

@media screen and (max-width:780px){
	#textos{padding-left:0;}
	#textos .blocos{width:calc(100% - 22px); margin-right:0 !important; float:none;}
	#textos .blocos:nth-child(2){width:calc(100% - 22px); margin-right:0;}
	#textos .blocos:nth-child(4){width:calc(100% - 22px); margin-right:0;}
	#container, #mainmenu{display:none;}
	#topo, #topo02{overflow:visible}
	#topo02{width:calc(100% -  20px); max-width:780px;}
	#logo{margin:0 auto;}
	#mainmenu2{display:block;}
	#lateral{width:calc(100% - 20px); float:none; max-width:780px;}
	#troca{width:100% ; float:none; max-width:780px; padding-left:0;}
}
@media screen and (max-width:320px){
	#troca{max-width:320px;}
	#logo{width:100%;}
	#mainmenu2{width:calc(100% - 10px);}
}