@{
    ViewBag.Title = ViewBag.Title;
}
@section Styles {
    <!-- CSS Header and Footer -->
@*<link rel="stylesheet" href="~/assets/css/css-rtl/headers/header-default-rtl.css">
<link rel="stylesheet" href="~/assets/css/css-rtl/footers/footer-v1-rtl.css">*@
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="~/assets/plugins/animate.css">
<link rel="stylesheet" href="~/assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="~/assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="~/assets/plugins/owl-carousel2/assets/owl.carousel.css">
<link rel="stylesheet" href="~/assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<link rel="stylesheet" href="~/assets/plugins/sky-forms-pro/skyforms/custom/custom-sky-forms.css">
<!--[if lt IE 9]><link rel="stylesheet" href="~/assets/plugins/sky-forms-pro/skyforms/css/sky-forms-ie8.css"><![endif]-->
<!-- CSS Page Style -->
<link rel="stylesheet" href="~/assets/css/css-rtl/pages/page_contact-rtl.css">
<!-- Style Switcher -->
<link rel="stylesheet" href="~/assets/css/plugins/style-switcher.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="~/assets/css/css-rtl/theme-colors/default.css" id="style_color">
<link rel="stylesheet" href="~/assets/css/css-rtl/theme-skins/dark.css">
<!-- RTL Customization -->
@*<link rel="stylesheet" href="~/assets/css/css-rtl/rtl.css">*@
     <!-- CSS Customization -->
<link rel="stylesheet" href="~/assets/css/css-rtl/custom-rtl.css">  
}

@section Scripts
{
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <!-- JS Implementing Plugins -->
@*<script src="../assets/plugins/back-to-top.js"></script>
<script src="../assets/plugins/smoothScroll.js"></script>*@
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrIFVAsphdx1y8EoJtL5xfBA11ZMfkCLo&callback=ContactPage.initMap" async defer></script>
<script src="~/assets/plugins/gmap/gmap.js"></script>
<script src="~/assets/plugins/owl-carousel2/owl.carousel.min.js"></script>
<script src="~/assets/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js"></script>
<script src="~/assets/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js"></script>
<!-- JS Page Level -->
<script src="~/assets/js/app.js"></script>
<script src="~/assets/js/forms/login.js"></script>
<script src="~/assets/js/forms/contact.js"></script>
<script src="~/assets/js/pages/page_contacts.js"></script>
<script src="~/assets/js/plugins/owl-carousel-rtl.js"></script>
<script src="~/assets/js/plugins/style-switcher-rtl.js"></script>
<script>
    jQuery(document).ready(function() {
        App.init();
        ContactPage.initMap();
        LoginForm.initLoginForm();
        ContactForm.initContactForm();
        OwlCarousel.initOwlCarousel();
        StyleSwitcher.initStyleSwitcher();
    });
</script>
<!--[if lt IE 9]>
    <script src="../assets/plugins/respond.js"></script>
    <script src="../assets/plugins/html5shiv.js"></script>
    <script src="../assets/plugins/placeholder-IE-fixes.js"></script>
    <script src="../assets/plugins/sky-forms-pro/skyforms/js/sky-forms-ie8.js"></script>
<![endif]-->
<!--[if lt IE 10]>
    <script src="../assets/plugins/sky-forms-pro/skyforms/js/jquery.placeholder.min.js"></script>
<![endif]-->


}

<marquee behavior="alternate">
    <img src="~/assets/plugins/parallax-slider/img/bg.jpg">
    <img src="~/assets/plugins/parallax-slider/img/bg.jpg">
</marquee>


<!--=== Breadcrumbs ===-->
<div class="breadcrumbs">
    <div class="container">
        <h1 class="pull-left"></h1>
        <ul class="pull-right breadcrumb">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            @*<li><a href="index.html">Home</a></li>*@
            @*<li>@Html.ActionLink("Systems", "Systems", "Home")</li>*@
            @*<li><a href="">Pages</a></li>*@
            <li class="active">Contact Us</li>
        </ul>
    </div>
</div><!--/breadcrumbs-->
<!--=== End Breadcrumbs ===-->


	<!--=== Content Part ===-->
<div class="container content">
    <div class="row margin-bottom-30">
        <div class="row margin-bottom-30">
            <div class="col-md-12 mb-margin-bottom-30">
                <div class="headline"><h2>Contact Us!!</h2></div>
                <p>Sophos Automation and Electronics are located on United States of America and Mexico</p>
                <p>And we have office on the Big Detroit, Michigan Area where a resurgence in manufacturing is seen as a major pathway to continued recovery. The auto industry still reigns in the Motor City</p>
                <p>Please post your comment in the form below. Sophos Electronics values your feedback or contact information, and we will do our best to provide you with an answer promptly. Remember to include an e-mail address to receive a reply.</p><br>
                
                <form method="post" id="sky-form3" class="sky-form sky-changes-3">
                    <fieldset>
                        <div class="row">
                            <section class="col col-6">
                                <label class="label">Name</label>
                                <label class="input">
                                    <i class="icon-append fa fa-user"></i>
                                    <input type="text" name="name" id="name">
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="label">E-mail</label>
                                <label class="input">
                                    <i class="icon-append fa fa-envelope-o"></i>
                                    <input type="email" name="email" id="email">
                                </label>
                            </section>
                        </div>
                        @*<div class="row">
        <section class="col col-6">
            <label class="label">Your Industry</label>
            <label class="input">
                <i class="icon-append fa fa-user"></i>
                <input type="dropdown" name="industry" id="industry">
            </label>
        </section>
        <section class="col col-6">
            <label class="label">Select Location:</label>
            <label class="input">
                <i class="icon-append fa fa-envelope-o"></i>
                <input type="dropdown" name="location" id="location">
            </label>
        </section>
    </div>*@
                        <section>
                            <label class="label">Subject</label>
                            <label class="input">
                                <i class="icon-append fa fa-tag"></i>
                                <input type="text" name="subject" id="subject">
                            </label>
                        </section>

                        <section>
                            <label class="label">Message</label>
                            <label class="textarea">
                                <i class="icon-append fa fa-comment"></i>
                                <textarea rows="4" name="message" id="message"></textarea>
                            </label>
                        </section>

                        <section>
                            <label class="checkbox"><input type="checkbox" name="copy"><i></i>Send a copy to my e-mail address</label>
                        </section>
                    </fieldset>

                    <footer>
                        <button type="submit" class="btn-u">Send message</button>
                    </footer>

                    <div class="message">
                        <i class="rounded-x fa fa-check"></i>
                        <p>Your message was successfully sent!</p>
                    </div>
                </form>
            </div><!--/col-md-9-->

        </div><!--/row-->
    </div><!--/row-->
    <div class="row margin-bottom-30">
        <div class="col-md-4">
            <!-- Google Map -->
            <div id="map" class="map map-box map-box-space1 margin-bottom-40">
            </div><!---/map-->
            <!-- End Google Map -->
            <!-- Contacts -->
            <div class="headline"><h2>Contacts</h2></div>
            <ul class="list-unstyled who margin-bottom-30">
                <li><a href="#"><i class="fa fa-home"></i>6338 New England Ln Canton, MI. 48187. USA</a></li>
                <li><a href="mailto:sophoselectronics@gmail.com"><i class="fa fa-envelope"></i>sale@sophosautomation.com</a></li>
                <li><a href="#"><i class="fa fa-phone"></i>Phone: 734 306 2027</a></li>
                <li><a href="#"><i class="fa fa-phone"></i>Fax: 586 806 9379</a></li>
                <li><a href=@Url.Content("~")><i class="fa fa-globe"></i>@Url.Content("~")</a></li>
            </ul>
            <!-- End Contacts -->
            <!-- Business Hours -->
            <div class="headline"><h2>Business Hours</h2></div>
            <ul class="list-unstyled margin-bottom-30">
                <li><strong>Monday-Friday:</strong> 8am to 8pm</li>
                <li><strong>Saturday:</strong> 11am to 3pm</li>
                <li><strong>Sunday:</strong> Closed</li>
            </ul>
            <!-- End Business Hours -->
        </div><!--/col-md-4-->

        <div class="col-md-4">
            <!-- Google Map -->
            <div id="map1" class="map map-box map-box-space1 margin-bottom-40">
            </div><!---/map-->
            <!-- End Google Map -->
            <!-- Contacts -->
            <div class="headline"><h2>Contacts</h2></div>
            <ul class="list-unstyled who margin-bottom-30">
                <li><a href="#"><i class="fa fa-home"></i>Calz Legaria 549, México Nuevo, 11250 Ciudad de México. Mexico</a></li>
                <li><a href="mailto:sophoselectronics@gmail.com"><i class="fa fa-envelope"></i>sale@sophosautomation.com</a></li>
                <li><a href="#"><i class="fa fa-phone"></i>Phone: 554 677 7657</a></li>
                <li><a href=@Url.Content("~")><i class="fa fa-globe"></i>@Url.Content("~")</a></li>
            </ul>
            <!-- End Contacts -->
            <!-- Business Hours -->
            <div class="headline"><h2>Business Hours</h2></div>
            <ul class="list-unstyled margin-bottom-30">
                <li><strong>Monday-Friday:</strong> 8am to 8pm</li>
                <li><strong>Saturday:</strong> 11am to 3pm</li>
                <li><strong>Sunday:</strong> Closed</li>
            </ul>
            <!-- End Business Hours -->
        </div><!--/col-md-4-->

        <div class="col-md-4">
            <!-- Google Map -->
            <div id="map2" class="map map-box map-box-space1 margin-bottom-40">
            </div><!---/map-->
            <!-- End Google Map -->
            <!-- Contacts -->
            <div class="headline"><h2>Contacts</h2></div>
            <ul class="list-unstyled who margin-bottom-30">
                <li><a href="#"><i class="fa fa-home"></i>130 Calle 3 Ote, Tehuacán, Puebla. Mexico</a></li>
                <li><a href="mailto:sophoselectronics@gmail.com"><i class="fa fa-envelope"></i>sale@sophosautomation.com</a></li>
                <li><a href="#"><i class="fa fa-phone"></i>Phone: 554 677 7657</a></li>
                <li><a href=@Url.Content("~")><i class="fa fa-globe"></i>@Url.Content("~")</a></li>
            </ul>
            <!-- End Contacts -->
            <!-- Business Hours -->
            <div class="headline"><h2>Business Hours</h2></div>
            <ul class="list-unstyled margin-bottom-30">
                <li><strong>Monday-Friday:</strong> 8am to 8pm</li>
                <li><strong>Saturday:</strong> 11am to 3pm</li>
                <li><strong>Sunday:</strong> Closed</li>
            </ul>
            <!-- End Business Hours -->
        </div><!--/col-md-4-->
    </div>
    <!-- Owl Clients v1 -->
    <div class="headline"><h2>Our Clients</h2></div>
    <div class="owl-clients-v1">

        <div class="item">
            <img src="~/assets/img/clients4/Anadarko.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Ford.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/SempraEnergy.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Ericsson.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Eaton.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/GEAppliances.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Siemens.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Alcoa.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/Pemex.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/GETransportation.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/GEAviation.png" alt="">
        </div>
        <div class="item">
            <img src="~/assets/img/clients4/GEDigitalEnergy.png" alt="">
        </div>

    </div>
    <!-- End Owl Clients v1 -->


</div>

<!--/container-->
<!--=== End Content Part ===-->