<!DOCTYPE html>
<html lang="en">
<head>
	<title>Contacts</title>
	<meta charset="utf-8">
	<meta name = "format-detection" content = "telephone=no" />
	<link rel="icon" href="images/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="css/grid.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/contact-form.css">
	<script src="js/jquery.js"></script>
	<script src="js/jquery-migrate-1.2.1.js"></script>
	<script src='//maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false'></script>  

	<!--[if (gt IE 9)|!(IE)]><!-->
	<script src="js/jquery.mobile.customized.min.js"></script>
	<script src="js/wow/wow.js"></script>
	<script>
		$(document).ready(function () {
			if ($('html').hasClass('desktop')) {
				new WOW().init();
			}
		});
	</script>
	<!--<![endif]-->

	<script src="js/TMForm.js"></script>
	<script src="js/modal.js"></script>



	<!--[if lt IE 9]>
  <div style=' clear: both; text-align:center; position: relative;'>
   <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
     <img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
   </a>
  </div>
  <![endif]-->
  <!--[if lt IE 9]>
  	<script src="js/html5shiv.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
  <![endif]-->
</head>

<body>

	<!--========================================================
														HEADER 
	=========================================================-->
	<header id="header" class="content_page">
		<div id="stuck_container">
			<div class="wrapper">
				<div class="container">
					<div class="row">
						<div class="grid_8">
							<h1><a href="index.html"><img src="images/logo.png" alt="logo"></a> </h1>
						</div>
						<div class="grid_4 plane6">
							<p class="txt1">SIA Trecho 17<br>Via IA-4 Lote 1155 <br>Brasilia - DF</p>
							<p class="txt2">3548-9500</p>
						</div>
					</div>
				</div>
			</div>

<div class="menu_holder">
				<div class="container">
					<nav>
						<ul class="sf-menu">
							<li class="current"><a href="index.html">Home<strong></strong></a></li>
							<li><a href="index-1.html">	Quem Somos<strong></strong></a></li>
							<li><a href="index-2.html">Serviços<strong></strong></a>
								<ul class="submenu">
									
									<li><a href="#">Audi</a></li>
									<li><a href="#">BMW</a></li>
									<li><a href="#">Ferrari</a></li>
									<li><a href="#">Jaguar</a></li>
									<li><a href="#">Lamborghini</a></li>
									<li><a href="#">Land Rover</a></li>
									<li><a href="#">Maserati</a></li>
									<li><a href="#">Mercedes Benz</a></li>
									<li><a href="#">Porsche</a></li>
									<li><a href="#">Rolls Royce</a></li>
									<li><a href="#">Volvo</a></li>
									
								</ul>
							</li>
									
											<li><a href="index-3.html">Fotos<strong></strong></a></li>
											<li><a href="index-4.html">Contatos<strong</strong></a></li>
											<li><a href="index-4.html">MOTUL<strong></strong></a></li>
										</ul>
					</nav>
				</div>
				
			</div>

		</div>
	</header>
	<!--========================================================
														CONTENT 
	=========================================================-->
	<section id="content">


		<div  class="box-4 wow fadeInUp">
			<div class="container">
				<div class="row">
					<div class="grid_8 z1">
						<section class="content_map">
							<div class="google-map-api"> 
								<div id="map-canvas" class="gmap"></div> 
							</div> 
						</section>
					</div>
					<div class="grid_4 padLeft1 z2">
					
						<p class="txt2 color2 marTop1">3548-9500</p>
						<p class="txt1 color2 marTop2">SIA Trecho 17 Via IA 4 Lote 1155 <br>Brasilia - DF</p>
						<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
					</div>
				</div>
			</div>
		</div>



		<div class="box-3 v2">
			<div class="container">
						<div class="row">
							<div class="grid_8">
								<h2>Fale Conosco<br><span class="color1">Perguntas</span></h2>

								<form id="contact-form">
									<div class="contact-form-loader"></div>
									<fieldset>

										<div class="row">
											<div class="grid_4">
												<label class="name">
													<input type="text" name="name" placeholder="Nome:" value="" data-constraints="@Required @JustLetters"  />
													<span class="empty-message">*Este campo é obrigatório.</span>
													<span class="error-message">*Este nao é um nome válido.</span>
												</label>
												<label class="phone">
													<input type="text" name="phone" placeholder="Telefone:" value="" data-constraints="@Required @JustNumbers" />
													<span class="empty-message">*Este campo é obrigatório.</span>
													<span class="error-message">*Este nao é um número válido.</span>
												</label>
												<label class="email">
													<input type="text" name="email" placeholder="E-mail:" value="" data-constraints="@Required @Email" />
													<span class="empty-message">*Este campo é obrigatório.</span>
													<span class="error-message">*Endereço de e-mail inválido.l.</span>
												</label>
											</div>

											<div class="grid_4">
												<label class="message">
													<textarea name="message" placeholder="Mensagem:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
													<span class="empty-message">*Este campo é obrigatório.</span>
													<span class="error-message">*fale mais com a</span>
												</label>
											</div>
										</div>
										<div class="btns">
											<a href="#" class="more_btn hover-2" data-type="submit">Submit</a>
											<a href="#" class="more_btn hover-2" data-type="reset">Reset</a>
										</div>
									</fieldset> 
									<div class="modal fade response-message">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<h4 class="modal-title">Modal title</h4>
												</div>
												<div class="modal-body">
													You message has been sent! We will be in touch soon.
												</div>      
											</div>
										</div>
									</div>
								</form>

		
							</div>

							<div class="grid_4 color2">

								<div class="txt_section2 plane3  wow fadeInRight" data-wow-delay="0.2s">
									<h2><span class="color2">Find us on </span> <br><span class="color1">social sites</span></h2>
									<p class="txt1">Nam aliquam pretium feugiat Duis sem est viverra </p>
									<p>Sed do eiusmod tempor incididu enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor. In reprehenderit in voluptate velit esse cillum dolore. Lorem ipsum dolor.</p>

									<ul class="soc_icons marTop16 wow fadeInRight">
										<li><a href="#"><i class="fa fa-facebook"></i></a></li>
										<li><a href="#"><i class="fa fa-twitter"></i></a></li>
										<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
									</ul>
								</div>



							</div>


						</div>
					</div>
		</div>


























	</section>



	<!--========================================================
														FOOTER 
	=========================================================-->
	<footer id="footer">
		<div class="container">
			<div class="row">
				<div class="grid_12">

					<p class="txt_priv wow fadeInLeft">Car Repair  &copy; <span id="copyright-year"></span>. <a href="index-5.html" class="link1">Privacy Policy</a></p>



					

				</div>
			</div>
		</div>
	</footer>



<script type="text/javascript"> 
	google_api_map_init();
	function google_api_map_init(){
		var map;
		var coordData = new google.maps.LatLng(parseFloat(-15.798685), parseFloat(-47.964945)); 
		var marker;



		var markerIcon = { 
				url: "images/gmap_marker.png", 
				size: new google.maps.Size(51, 52), 
				origin: new google.maps.Point(0,0), 
				anchor: new google.maps.Point(21, 70) 
		};

		styleArray=[{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]

		function initialize() { 
			var mapOptions = { 
				zoom: 15, 
				center: {lat: -15.799685, lng: -47.976945},
				scrollwheel: false, 
				styles: styleArray 
			}

			var contentString = "<div></div>"; 
			var infowindow = new google.maps.InfoWindow({ 
				content: contentString, 
				maxWidth: 200 
			});
			 
			var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
			marker = new google.maps.Marker({ 
				map:map, 
				draggable:true, 
				position: {lat: -15.709885, lng: -47.904945},
				icon: markerIcon 
			});
			
		}
		google.maps.event.addDomListener(window, "load", initialize); 
	}




/*


*/


</script>

</body>
</html>