<?php
    session_start();
    include("php/captcha.php");
    $_SESSION['captcha'] = simple_php_captcha();
?>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Ahorro y Prestamo INVU desde 7% &quot;Costa Rica&quot;</title>
		<meta name="description" content="ahorro – invu">
		<meta name="author" content="Fusion Creativa">
		
		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		
		<!-- Put favicon.ico and apple-touch-icon(s).png in the images folder -->
	    <link rel="shortcut icon" href="images/favicon.ico">
		    	
		<!-- CSS StyleSheets -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&amp;amp;subset=latin,latin-ext">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/prettyPhoto.css">
		<link rel="stylesheet" href="css/slick.css">
		<link rel="stylesheet" href="rs-plugin/css/settings.css">
		<link rel="stylesheet" id="MainStyle" href="css/style.css">
		<link rel="stylesheet" href="css/responsive.css">
		<!--[if lt IE 9]>
	    	<link rel="stylesheet" href="css/ie.css">
	    	<script type="text/javascript" src="js/html5.js"></script>
	    <![endif]-->

		
		<!-- Skin style (** you can change the link below with the one you need from skins folder in the css folder **) -->
		<link rel="stylesheet" id="skinCSS" href="css/skins/default.css">
	
	</head>
	<body>
	    
	    <!-- site preloader start -->
      <div class="page-loader">
	    	<div class="loader-in"></div>
	    </div>
	    <!-- site preloader end -->
	    
	    <div class="pageWrapper">
		    
		    <!-- login box start 
			<div class="login-box">
				<a class="close-login" href="#"><i class="fa fa-times"></i></a>
				<form>
					<div class="container">
						<p>Hello our valued visitor, We present you the best web solutions and high quality graphic designs with a lot of features. just login to your account and enjoy ...</p>
						<div class="login-controls">
							<div class="skew-25 input-box left">
								<input type="text" class="txt-box skew25" placeholder="User name Or Email" />
							</div>
							<div class="skew-25 input-box left">
								<input type="password" class="txt-box skew25" placeholder="Password" />
							</div>
							<div class="left skew-25 main-bg">
								<input type="submit" class="btn skew25" value="Login" />
							</div>
							<div class="check-box-box">
								<input type="checkbox" class="check-box" /><label>Remember me !</label>
								<a href="#">Forgot your password ?</a>
							</div>
						</div>
					</div>
				</form>
			</div>
			<!-- login box End -->
			
			
			<!-- Header Start -->
			<div id="headWrapper" class="clearfix">
		    	
		    	<!-- top bar start -->
		    	<div class="top-bar">
				    <div class="container">
						<div class="row">
							<div class="cell-5">
							    <ul>
								    <li><a href="mailto:info@ahorroyprestamoinvu.co.cr"><i class="fa fa-envelope"></i>info@ahorroyprestamoinvu.co.cr
</a></li>
								    <li><a href="tel:+506 2441-1226"><i class="fa fa-phone"></i>+506 2441-1226</a></li>
							    </ul>
							</div>
							<div class="cell-7 right-bar">
					    		<ul class="right">
						    	   <!--  <li><a href="cart.html"><i class="fa fa-shopping-cart"></i>0 item(s) - $0.00</a></li>
						    	    <li><a href="siteMap.html"><i class="fa fa-sitemap"></i>Site Map</a></li>
						    	    <li><a href="register.html"><i class="fa fa-user"></i>Register</a></li>
						    	    <li><a href="#" class="login-btn"><i class="fa fa-unlock-alt"></i> Login</a></li>-->
						        </ul>
							</div>
						</div>
				    </div>
			    </div>
			    <!-- top bar end -->
			    
			    <header class="top-head" data-sticky="true">
				    <div class="container">
					    <div class="row">
					    	<div class="logo cell-3">
						    	<a href="home.html"></a>
						    </div>
						    <div class="cell-9 top-menu">
							    <!-- top navigation menu start -->
							    <nav class="top-nav">
								    <ul>
								      <li><a href="index.html"><i class="fa fa-home"></i><span>Inicio</span></a>
                                      <li><a href="funcionamiento.html"><i class="fa fa-cogs"></i><span>¿Como Funciona?</span></a>
                                      <li><a href="finalidades.html"><i class="fa fa-cubes"></i><span>Finalidades</span></a>
                                      <li><a href="planes.html"><i class="fa fa-database"></i><span>Planes</span></a>
                                      <li><a href="beneficios.html"><i class="fa fa-copy"></i><span>Beneficios</span></a>
                                      <li class="selected"><a href="#"><i class="fa fa-phone"></i><span>Contacto</span></a>
								    </ul>
							    </nav>
							    <!-- top navigation menu end -->
							    
							    <!-- top search start -->
							   <!-- <div class="top-search">
						    		<a href="#"><span class="fa fa-search"></span></a>
							    	<div class="search-box">
							    		<div class="input-box left">
							    			<input type="text" name="t" id="t-search" class="txt-box" placeHolder="Enter search keyword here..." />
							    		</div>
							    		<div class="left">
							    			<input type="submit" id="b-search" class="btn main-bg" value="GO" />
							    		</div>
							    	</div>
							    </div>-->
							    <!-- top search end -->

							</div>
					    </div>
				    </div>
			    </header>
			</div>
			<!-- Header End -->
			
			<!-- Content Start -->
			<div id="contentWrapper">
				<div class="page-title title-1">
					<div class="container">
						<div class="row">
							<div class="cell-12">
								<h1 class="fx" data-animate="fadeInLeft">Contáctenos <span></span></h1>
								<!--<div class="breadcrumbs main-bg fx" data-animate="fadeInUp">
									<span class="bold">You Are In:</span><a href="#">Home</a><span class="line-separate">/</span><a href="#">Pages </a><span class="line-separate">/</span><span>Contact us</span>
								</div>-->
							</div>
						</div>
					</div>
				</div>
				
				<div class="padd-top-50">
					<div class="container">
						<div class="row">
			    			<div class="cell-7 contact-form fx" data-animate="fadeInLeft" id="contact">
			    				<h3 class="block-head">Formulario de Contacto</h3>
			    				<div id="message" style="display: none;">
                                    <i class="fa fa-smile-o success-icon"></i>
                                    <p class="congrats">Gracias!</p>
                                    <p class="congratsTxt">Su mensaje ha sido enviado correctamente, Por favor haga clic en el enlace de abajo para ir a la página principal.</p>
                                    <div><a href="index.html" class="btn btn-large main-bg">Página Principal.</a></div>
                                </div>
                                <form class="form-signin cform" method="post" action="php/contact.php" id="cform" autocomplete="on">
			    					<div class="form-input">
				    					<label>Nombre<span class="red">*</span></label>
				    					<input type="text" name="name" id="name" required="required">
			    					</div>
			    					<div class="form-input">
			    						<label>Email<span class="red">*</span></label>
			    						<input name="email" type="email" id="email" required="required">
			    					</div>
			    					<div class="form-input">
			    						<label>Teléfono</label>
			    						<input name="phone" type="text" id="phone">			    						
			    					</div>
			    					<div class="form-input">
			    						<label>Mensaje<span class="red">*</span></label>
			    						<textarea name="message" cols="40" rows="7" id="messageTxt" spellcheck="true" required="required"></textarea>
			    					</div>
			    					<div  class="form-input">
                                        <div class="row">
                                            <div class="cell-12 margin-bottom-20"><img alt="" src="<?php echo $_SESSION['captcha']['image_src']; ?>" id='captchaimg' ></div>
                                            <input type="hidden" id="hidCap" value="<?php echo $_SESSION['captcha']['code']; ?>" data-error="El código captcha no coincide!" />
                                            <div class="cell-3"><input id="captcha_input" name="captcha_input" type="text" required="required"></div>
                                            <div class="cell-6"><label for='message'>Introduzca el código de seguridad :</label><small>No se puede leer la imagen? haga clic aquí para <a href='#' id="rfrshCaptcha">refrescar</a></small></div>
                                        </div>
			    					</div>
			    					<div class="form-input">
			    						<input id="submit" name="submit" type="submit" class="btn btn-large main-bg" value="Enviar">&nbsp;&nbsp;<input type="reset" class="btn btn-large" value="Borrar" id="reset">
			    					</div>

			    				</form>
			    			</div>
			    			<div class="cell-5 contact-detalis">
			    				<h3 class="block-head">Contacto Directo</h3>
			    				<p class="fx" data-animate="fadeInRight" align="center">
                                <img src="images/steve.png" align="left" hspace="25" vspace="15"><br>
                                Si tiene alguna consulta, sugerencia o desea una asesoría con nuestro Comisionista:<br> <strong>Gerhard Stefan Schlager Love <br>Comisionista #215.</strong><br>
Utilice alguna de los siguientes medios de comunicación</p><br><br><br><br>
			    				<hr class="hr-style4">
			    				<div class="clearfix"></div>
			    				<div class="padding-vertical">
			    					<div class="cell-5 fx" data-animate="fadeInRight">
				    					<h4 class="main-color bold">Oficina: Alajuela</h4>
				    					<p>Alajuela Centro, 50m sur y 200m este de Mc Donalds La Tropicana, Casa color amarilla.</p>
				    					<h5 >Email:</h5>
				    					<p><a href="mailto:info@ahorroyprestamoinvu.co.cr">info@ahorroyprestamoinvu.co.cr</a></p>
				    					
				    				</div>
                                    <div class="cell-2"><br></div>
				    				<div class="cell-5 fx" data-animate="fadeInRight">
                                    <h5 >Teléfono:</h5>
				    					<p class="main-color bold">+506 2441-1226</p>
				    					<h5 >Celular:</h5>
				    					<p class="main-color bold">+506 8393-1679</p>
                                        <h5 >Celular:</h5>
				    					<p class="main-color bold">+506 8849-8890</p>
				    					<a href="http://waze.to/lr/hd1u15848e"><img src="images/logowaze.jpg"></a>
				    				</div>
			    				</div>
			    			</div>
						</div>
					</div>
				</div>
				
				<div class="padd-vertical-45">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <div id="map_canvas" style="height: 450px; width: 100%;">
                    <script type="text/javascript"> 
                        function init_map(){
                            var myOptions = {zoom:14,center:new google.maps.LatLng(10.019530, -84.218150),
                            mapTypeId: google.maps.MapTypeId.ROADMAP};
                            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                            marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(10.019530, -84.218150)});
                            infowindow = new google.maps.InfoWindow({content:"<div class='noScroll'><b>Oficina</b><br/>Alajuela Centro<br/>50m sur y 200m este de Mc Donalds La Tropicana, Casa color amarilla.</div>" });
                            google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});
                            infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
                    </script>
                </div>
                
            </div>
			<!-- Content End -->
			
			<!-- footer bottom bar start -->
			    <div class="footer-bottom">
				    <div class="container">
			    		<div class="row">
				    		<!-- footer copyrights left cell -->
				    		<div class="copyrights cell-5">Diseño y Hosting por <a href="https://www.fusioncreativa.us/"><b>Fusion Creativa</b></a> 2017.</div>
				    		
				    		<!-- footer social links right cell start -->
						    <div class="cell-7">
							    <ul class="social-list right">
								    <li class="skew-25"><a href="https://www.facebook.com/pages/Ahorro-Invu/817325904978845?fref=ts" data-title="facebook" data-tooltip="true"><span class="fa fa-facebook skew25"></span></a></li>
							    </ul>
						    </div>
						    <!-- footer social links right cell end -->
						    
			    		</div>
				    </div>
			    </div>
			    <!-- footer bottom bar end -->
			    
		    </footer>
		    <!-- Footer end -->
		    
		    <!-- Back to top Link -->
	    	<div id="to-top" class="main-bg"><span class="fa fa-chevron-up"></span></div>
	    
	    </div>
	    
	    <div class="ModalPopUp">
	    	<div class="ModalContainer">
	    		<div class="Modalheader">
	    			<h3></h3>
	    			<a href="#" class="closePopup"><span class="fa fa-times"></span></a>
	    		</div>
	    		<div class="ModalContent">
	    		</div>
	    	</div>
	    </div>
	    <!-- Load JS siles -->	    <script type="text/javascript" src="js/jquery.min.js"></script>
	    
	    <!-- Waypoints script -->
		<script type="text/javascript" src="js/waypoints.min.js"></script>
		
		<!-- SLIDER REVOLUTION SCRIPTS  -->
		<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.tools.min.js"></script>
		<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
		
		<!-- Animate numbers increment -->
		<script type="text/javascript" src="js/jquery.animateNumber.min.js"></script>
		
		<!-- slick slider carousel -->
		<script type="text/javascript" src="js/slick.min.js"></script>
		
		<!-- Animate numbers increment -->
		<script type="text/javascript" src="js/jquery.easypiechart.min.js"></script>
		
		<!-- PrettyPhoto script -->
		<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
		
		<!-- Share post plugin script -->
		<script type="text/javascript" src="js/jquery.sharrre.min.js"></script>
		
		<!-- Product images zoom plugin -->
		<script type="text/javascript" src="js/jquery.elevateZoom-3.0.8.min.js"></script>
		
		<!-- Input placeholder plugin -->
		<script type="text/javascript" src="js/jquery.placeholder.js"></script>
		
		<!-- Contact us js file -->
		<script type="text/javascript" src="js/contact.js"></script>
		
		<!-- Tweeter API plugin -->
		<script type="text/javascript" src="js/twitterfeed.js"></script>
		
		<!-- Tweeter API plugin -->
		<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
		
		<!-- NiceScroll plugin -->
		<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
		
		<!-- jquery cookie script file -->
		<script type="text/javascript" src="js/jquery.cookie.js"></script><script type="text/javascript" src="js/mailChimp.js"></script>

		<!-- Style script file -->
		<script type="text/javascript" src="js/jquery.style.js"></script>
		
		<!-- general script file -->
		<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>