﻿@import url(http://fonts.googleapis.com/css?family=Lato);
*{margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body{
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: #16210b;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
.content{
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 15px;
	position: relative;
}
.callback{display: none;}
.navresponsive{
  position: absolute;
  font-size: 1.2em;
  top: 0.7em;
  right: 12px;
  z-index: 9999;
}
.navresponsive:before,.navresponsive:after{
	position: absolute;
	left: 0;
	right: 0;
	content: ' ';
	border-top: 0.13333333em solid #FFFFFF;
}
.navresponsive:before{
	top: 0.37777778em;
}
.navresponsive:after{
	top: 0.88888889em;
}
.navresponsive{
  display: none;
  cursor: pointer;
  position: relative;
  font-size: 23px;
  padding: .5em 0;
  height: 0;
  width: 1.66666667em;
  border-top: 0.13333333em #FFFFFF;
}
header{
  display: block;
  background-color: #137CDF;
  padding: 10px;
  border-bottom: 4px solid #333333;
}
header .login{
  display: inline-block;
  vertical-align: top;
}
header .login form .box{
  border:none;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
}
header .login form .box2{
  border:none;
  background-color: #FFFFFF;
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
}
header .login form .button{
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  background-color: #333333;
  cursor: pointer;
  color: #FFFFFF;
  border:none;
  transition: 0.2s;
}
header .login form .button:hover{
  opacity: 0.8;
}
header .menubar{
  display: inline-block;
  vertical-align: top;
  float: right;
  margin: 3px 0 0 0;
}
header .menubar nav{
	display: block;
	margin: 4px 0 0 0;
}
header .menubar nav ul li{
  display: inline-block;
  margin: 0 10px 0 0;
}
header .menubar nav ul li a{
  text-decoration: none;
  color: #FFFFFF;
  margin: 0 10px 0 0;
  font-size: 22px;
  transition: 0.2s;
}
header .menubar nav ul li a:hover{
	color: #333333;
}
header .menubar nav ul li .now{
	color: #333333 !important;
}
section .banner{
    display: block;
    padding: 50px 0;
    margin: -600px 0 0 0;
    z-index: 9999;
    position: relative;
}
section .banner a{
  text-decoration: none;
}
section .banner p{
  display: block;
  vertical-align: top;
  padding: 10px;
  margin: 30px 0 0 0;
  color: #FFFFFF;
  font-size: 25px;
  border-radius: 10px;
  background-color: rgba(12, 15, 128, 0.73);
  width: 60%;
}
section .banner a .logo{
  display: inline-block;
  margin: 100px 0 0 0;
  vertical-align: top;
}
section .locate{
  display: block;
  padding: 30px 0 0 0;
  text-align: center;
  background-color: #f5f5f5;
  margin: 100px 0 0 0;
}
section .locate .content h1{
  display: block;
  font-size: 35px;
  margin: 0 0 20px 0;
  border-bottom: 2px solid #333333;
  padding: 0 0 10px 0;
}
section .locate .content p{
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  background-color: rgba(12, 15, 128, 0.73);
  color: #FFFFFF;
  font-size: 18px;
  position: absolute;
  margin: 70px 0 0 20px;
  z-index: 9999;
}
section .locate .content iframe{
  border-radius: 10px;
  display: block;
}
section .marcas{
  display: block;
  padding: 60px 0 30px 0;
  text-align: center;
}
section .marcas .content h1{
  display: block;
  font-size: 35px;
  margin: 0 0 20px 0;
}
section .marcas .content .show{
  display: block;
}
section .marcas .content .show img{
  display: inline-block;
  vertical-align: middle;
  width: 150px;
  margin: 0 0 10px 10px;
}
section .wabout{
	display: block;
	padding: 40px 0;
	/*margin: 135px 0 0 0;*/
}
section .wabout .content h1{
	display: block;
	font-size: 30px;
	margin: 0 0 15px 0;
}
section .wabout .content p{
	font-size: 20px;
	display: inline-block;
	vertical-align: top;
	width: 70%;
	padding: 0 0 20px 0;
	border-bottom: 2px solid #137CDF;
}
section .wabout .content img{
	display: inline-block;
	vertical-align: middle;
	width: 29%;
	margin: -70px 0 0 0;
	opacity: 0.8;
}
section .wabout .content .mv{
	display: block;
}
section .wabout .content .mv img{
	display: inline-block;
	vertical-align: middle;
	width: 40%;
	margin: 0 6px 0 0 !important;
}
section .wabout .content .mv .m{
	display: inline-block;
	vertical-align: top;
	width: 59%;
	padding: 10px;
	background-color: #137CDF;
	color: #FFFFFF;
}
section .wabout .content .mv .m h1{
	border-bottom: 2px solid #FFFFFF;
}
section .wabout .content .mv .m p{
	width: 100%;
}
section .wabout .content .mv .v{
	display: block;
	margin: 20px 0 0 0;
	vertical-align: top;
	width: 100%;
	padding: 10px;
	background-color: #137CDF;
	color: #FFFFFF;
}
section .wabout .content .mv .v h1{
	border-bottom: 2px solid #FFFFFF;
}
section .wabout .content .mv .v p{
	width: 100%;
}
section .wproducts{
	display: block;
	padding: 40px 0;
}
section .wproducts .content h1{
	display: block;
	font-size: 30px;
	margin: 0 0 15px 0;
}
section .wproducts .content p{
	font-size: 20px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	padding: 0 0 20px 0;
	border-bottom: 2px solid #137CDF;
	margin: 0 0 20px 0;
}
section .wproducts .content .show{
	display: block;
}
section .wproducts .content .show article{
	display: inline-block;
	vertical-align: top;
	width: 33%;
	padding: 10px;
	border-radius: 10px;
	background-color: #137CDF;
	color: #FFFFFF;
	text-align: center;
	margin: 0 0 10px 0;
}
section .wproducts .content .show article img{
	display: inline-block;
	vertical-align: top;
	margin: 0 0 10px 0;
	width: 40%;
}
section .wproducts .content .show article span{
	font-size: 20px;
	width: 100%;
	display: block;
	text-align: left;
}
section .wproducts .content .pagination{
	display: block;
	margin: 10px 0 0 0;
	text-align: center;
}
section .wproducts .content .pagination a{
	border-radius: 10px;
	padding: 10px;
	text-decoration: none;
	color: #137CDF;
	background-color: #c0c0c0;
}
section .wcontact{
	display: block;
	padding: 40px 0;
}
section .wcontact .content h1{
	display: block;
	font-size: 30px;
	margin: 0 0 15px 0;
}
section .wcontact .content p{
	font-size: 20px;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	padding: 0 0 20px 0;
	border-bottom: 2px solid #137CDF;
	margin: 0 0 20px 0;
}
section .wcontact .content img{
	display: inline-block;
	vertical-align: middle;
	width: 35%;
	margin: 0 10px 0 0;
}
section .wcontact .content .form{
	display: inline-block;
	vertical-align: top;
	width: 59%;
}
section .wcontact .content .form h1{
	display: block;
	font-size: 22px;
	margin: 0 0 4px 0;
}
section .wcontact .content .form span{
	display: block;
	font-size: 18px;
	margin: 0 0 10px 0;
}
section .wcontact .content .form form{
	display: block;
}
section .wcontact .content .form form .box{
	font-family: 'Lato', sans-serif;
	display: block;
	width: 100%;
	border-radius: 10px;
	border: 1px solid #333333;
	margin: 0 0 5px 0;
	padding: 10px;
	font-size: 16px;
}
section .wcontact .content .form form .button{
	border-radius: 10px;
	color: #FFFFFF;
	background-color: #333333;
	padding: 10px;
	font-size: 16px;
	cursor: pointer;
	border: none;
	transition: 0.2s;
}
section .wcontact .content .form form .button:hover{
	opacity: 0.9;
}
section .wcontact .content .extra{
	display: block;
	margin: 20px 0 0 0;
}
section .wcontact .content .extra p{
	display: block;
	text-align: center;
}
footer{
	display: block;
	padding: 30px 0;
	background-color: #333333;
}
footer .content .mf{
	display: inline-block;
	vertical-align: top;
	width: 100%;
	text-align: center;
}
footer .content .mf ul{
	display: block;
	border-bottom: 2px solid #FFFFFF;
	margin: 0 0 40px 0;
	padding: 0 0 20px 0;
}
footer .content .mf ul li{
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 0 0;
}
footer .content .mf ul li a{
	font-size: 18px;
	color: #FFFFFF;
	transition: 0.2s;
	text-decoration: none;
}
footer .content .mf ul li a:hover{
	opacity: 0.9;
}
footer .content .rights{
	display: block;
	vertical-align: top;
	width: 100%;
	text-align: right;
}
footer .content .rights p{
	font-size: 17px;
	display: block;
	color: #FFFFFF;
}
footer .content .rights p a{
	text-decoration: none;
	color: #FFFFFF;
}
/* Responsive */
@media screen and (max-width: 1100px){
	section .banner{margin: -530px 0 0 0;}
	section .locate{margin: 62px 0 0 0;}
	section .wabout{margin: 65px 0 0 0;}
	section .wproducts{margin: 65px 0 0 0;}
	section .wcontact{margin: 65px 0 0 0;}
}
@media screen and (max-width: 1000px){
	header .login form .box,header .login form .button{padding: 5px;}
	header .menubar nav ul li a{font-size: 18px;}
	section .banner p{margin: 10px 0 0 0;font-size: 18px;}
	section .banner{margin: -415px 0 0 0;}
	section .locate .content h1,section .marcas .content h1{font-size: 30px;}
	section .locate .content p{width: 92%;}
	section .locate{margin: 71px 0 0 0;}
	section .wabout{margin: 71px 0 0 0;}
	section .wproducts{margin: 71px 0 0 0;}
	section .wcontact{margin: 71px 0 0 0;}
	section .marcas .content .show img{width: 100px;}
	footer .content .rights p{font-size: 15px;}
	footer .content .mf ul li a{font-size: 16px;}
	section .locate iframe{height: 250px !important;}
	section .banner a .logo{margin: 45px 0 0 0;}
	section .wabout .content .mv img{width: 39%;}
}
@media screen and (max-width: 900px){
	header .login form .box{width: 100px;}
	header .login form .box2{display: grid; width: auto; margin-bottom: 10px;}
	section .banner p,section .wabout .content p,section .wproducts .content p,section .wcontact .content p,section .wcontact .content .extra p{font-size: 16px;}
	section .banner{margin: -370px 0 0 0;}
	section .locate .content h1, section .marcas .content h1,section .wabout .content h1,section .wabout .content .mv .m h1,section .wabout .content .mv .v h1,section .wproducts .content h1,section .wcontact .content h1{font-size: 25px;}
	section .locate .content p{width: 91%;}
	section .wabout .content .mv{margin: 20px 0 0 0;}
	section .wproducts .content .show article span{font-size: 18px;}
	section .locate {margin: 0 0 0 0;}
	section .wabout{margin: 0 0 0 0;}
	section .wproducts{margin: 0 0 0 0;}
	section .wcontact{margin: 0 0 0 0;}
}
@media screen and (max-width: 800px){
	section .banner a .logo{margin: 25px 0 0 0;}
	section .banner p{width: 75%;}
	section .banner{margin: -320px 0 0 0;}
	section .locate .content p{width: 90%;}
}
@media screen and (max-width: 700px){
	header .menubar{width: 50%;position: absolute;margin: -14px 0 0 0;}
	#menu ul {max-height: 0;overflow: hidden;margin: 60px 3.5em 0 1em;text-align: center;width: 100%;}
	#menu li {visibility: hidden;display: block;border: none;z-index: 10001;position: relative;width: 100%;}
	#menu .navresponsive {display: block;position: absolute;z-index: 10003;}
	#callback:checked + #menu ul {max-height: 245px;margin: 0;padding:60px 0 0 0;text-align: center;width: 100%;background-color: RGBA(0, 0, 0, 0.75);position: relative;z-index: 10000;}
	#callback:checked + #menu li {visibility: visible;line-height: 40px;width: 100%;background-color: rgba(19,124,223,0.7);}
	#callback:checked + #menu li a:hover{background-color: transparent;}
	#callback:checked + #menu li .now{background-color: transparent !important;}
	#callback:checked + #menu .navresponsive,#callback:checked + #menu .navresponsive:after,#callback:checked + #menu .navresponsive:before {border-color: #aaa;}
	section .banner p{width: 85%;}
	section .banner{margin: -297px 0 0 0;}
	section .locate .content p{width: 88%;}
	section .locate .content p{font-size: 16px;}
	section .wproducts .content .show article{width: 49%;}
	section .locate {margin: -23px 0 0 0;}
	section .wabout{margin: -35px 0 0 0;}
	section .wproducts{margin: -35px 0 0 0;}
	section .wcontact{margin: -35px 0 0 0;}
}
@media screen and (max-width: 600px){
	header .menubar{width: 40%;}
	section .banner p{width: 100%;}
	section .banner a .logo{margin: 0;width: 200px;}
	section .banner {margin: -245px 0 0 0;}
	section .locate .content h1, section .marcas .content h1, section .wabout .content h1, section .wabout .content .mv .m h1, section .wabout .content .mv .v h1, section .wproducts .content h1, section .wcontact .content h1{font-size: 20px;}
	section .locate .content p{width: 87%;}
	section .marcas .content .show img{width: 90px;}
	section .wcontact .content .form form .box{font-size: 15px;padding: 8px;}
	section .wcontact .content .form form .button{padding: 8px;}
}
@media screen and (max-width: 500px){
	header .menubar{width: 39%;position: absolute;margin: -14px 0 0 -50px;}
	section .banner a .logo{width: 150px;}
	section .banner p{font-size: 15px;}
	section .banner{margin: -194px 0 0 0;}
	section .locate .content p{width: 82%;}
	section .wabout .content img{margin: -50px 0 0 0;}
	section .wabout .content .mv img{display: none;}
	section .wabout .content .mv .m{width: 100%;}
	section .wproducts .content .show article{width: 100%;}
	section .wcontact .content .form span{width: 16px;}
	section .locate {margin: -64px 0 0 0;}
	section .wabout{margin: -35px 0 0 0;}
	section .wproducts{margin: -35px 0 0 0;}
	section .wcontact{margin: -35px 0 0 0;}
}
@media screen and (max-width: 400px){
	.login form .box{width: 86px !important;}
}
/* Animations */
@-webkit-keyframes extra{
    0%   {opacity: 0.8;}
    25%  {opacity: 1;}
    50%  {opacity: 0.8;}
    75%  {opacity: 1;}
    100% {opacity: 0.8;}
}
@keyframes extra{
    0%   {opacity: 0.8;}
    25%  {opacity: 1;}
    50%  {opacity: 0.8;}
    75%  {opacity: 1;}
    100% {opacity: 0.8;}
}