<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#1faf71">
    <link href='images/index/icono_h2.png' rel='shortcut icon' type='image/vnd.microsoft.icon'>
    <title>ITTEC | Tecnología Inteligente</title>
    <!-- slick -->
    <link rel="stylesheet" type="text/css" href="css/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="css/slick/slick-theme.css" />
    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- style this page -->
    <link href="css/lang-selector.css" rel="stylesheet">
    <link href="css/style-nosotros.css" rel="stylesheet">    
    <!-- Para animaciones -->
    <link href="css/animations.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <!-- Para la transición -->
    <script src="lib/jquery.js"></script>
    <script src="lib/jquery.bgswitcher.js"></script>
    <!-- Skeleton Loader -->
    <link rel="stylesheet" href="css/placeholder-loading.min.css">
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/a77a9ce78b.js" crossorigin="anonymous"></script>

    
</head>
<body>
    <script>
        var lastScrollTop = 0;
        $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
            // downscroll code
            $(".scrolldown").css('display','none');
        }
        lastScrollTop = st;
        });
    </script>
    <header id="header-vuejs">
        <?php  include 'header2.html' ?>
    </header>    
    
<section id="myapp">
    <div class="container">
        <div class="row skeleton-header">
            <div class="hd-skeleton-logo pulse" style="width: 18rem;">
                <div class="card-body img-hd">
                    <div class="ph-picture" style="height: 75px;"></div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-card pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-col-10 big"></div>
                    </div>
                </div>
            </div>
            <div class="hd-skeleton-search pulse">
                <div class="card-body">
                    <div class="ph-row">
                        <div class="ph-picture" style="height: 41px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row skeleton-body">
            <div class="container skeleton-video pulse">
                <div class="ph-picture video-sk" style="height:500px;"></div>
                <div class="ph-col-12 big empty"></div>
            </div>
        </div>
        <div class="row skeleton-body">
            <div class="container col skeleton-video pulse">
                    <div class="ph-picture video-sk" style="height:300px;"></div>
                </div>
                <div class="col container pulse">
                    <div class="ph-row">
                        <div class="ph-col-8 big"></div>
                        <div class="ph-col-6 empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-8"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-8"></div>
                        <div class="ph-col-12 big empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-8"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-8"></div>
                        <div class="ph-col-12 big empty"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container skeleton-body">
            <div class="row">
                <div class="col container pulse">
                    <div class="ph-row">
                        <div class="ph-col-12 big"></div>
                        <div class="ph-col-6 empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                    </div>
                </div>
                <div class="col container pulse">
                    <div class="ph-row">
                        <div class="ph-col-8 big"></div>
                        <div class="ph-col-6 empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-12"></div>
                    </div>
                </div>
            </div>  
        </div>
        <div class="container skeleton-body">
            <div class="row">    
                <div class="col container pulse">
                    <div class="ph-row">
                        <div class="ph-col-8 big"></div>
                        <div class="ph-col-6 empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-8"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-8"></div>
                        <div class="ph-col-12 big empty"></div>
                    </div>
                    <div class="ph-row">
                        <div class="ph-col-8"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-12"></div>
                        <div class="ph-col-10"></div>
                        <div class="ph-col-8"></div>
                    </div>
                </div>
                <div class="container col skeleton-video pulse">
                    <div class="ph-picture video-sk" style="height:300px;"></div>
                </div>
            </div> 
        </div>
        <div class="skeleton-body d-flex flex-row justify-content-center alig-items-center">
                <div class="row skeleton-body">
                    <div class="pulse skeleton-loading" style="width: 18rem;">
                        <div class="card-body">
                            <div class="ph-row">
                                <div class="ph-col-10 big"></div>
                                <div class="ph-col-10"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-10"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-12"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-8"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-8"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-6"></div>
                            </div>
                        </div>
                    </div>
                    <div class="pulse skeleton-loading" style="width: 18rem;">
                        <div class="card-body">
                            <div class="ph-row">
                                <div class="ph-col-10 big"></div>
                                <div class="ph-col-2 empty big"></div>
                                <div class="ph-col-6"></div>
                                <div class="ph-col-4 empty"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-10"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-8"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-10"></div>
                                <div class="ph-col-2 empty"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-4"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-12"></div>
                            </div>
                        </div>
                    </div>
                    <div class="pulse skeleton-loading" style="width: 18rem;">
                        <div class="card-body">
                            <div class="ph-row">
                                <div class="ph-col-10 big"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-picture ph-col-2 big"></div>
                                <div class="ph-col-2 empty"></div>
                                <div class="ph-col-8"></div>
                                <div class="ph-picture ph-col-2 big"></div>
                                <div class="ph-col-2 empty"></div>
                                <div class="ph-col-8"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-10 big"></div>
                                <div class="ph-col-12 empty"></div>
                                <div class="ph-col-12"></div>
                            </div>
                        </div>
                    </div>
                    <div class="pulse skeleton-loading" style="width: 18rem;">
                        <div class="card-body">
                            <div class="ph-picture img-sk"></div>
                        </div>
                    </div>            
                </div>
        </div>
    </div>
    <div class="vittec-nosotros">
        <div class="row">
            <div class="col">
                <div class="scrolldown">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="vittec">
                <video  autoplay="autoplay" :src="video" ref="video" loop muted>
                    <!-- <source :src="srcnosotros" type="video/mp4"> -->
                </video>
            </div>
        </div>
    </div>
    <div class="section-nosotros">
        <div class="languajes" >
            <div class="lang-menu">
                <div id="select" class="selected-lang">
                </div>
                <ul id="opciones">
                    <li>
                        <a href="#" @click="cambiarIdioma('es');cambiarVideo('https://www.ittec.mx/media/vittec_nosotros_es.mp4');guardarIdioma('es')" class="es">{{ $t("message.esp") }}</a>
                    </li>
                    <li >
                        <a href="#"  @click="cambiarIdioma('en');cambiarVideo('https://www.ittec.mx/media/vittec_nosotros_en.mp4');guardarIdioma('en')" class="en">{{ $t("message.eng") }}</a>
                    </li>                    
                </ul> 
            </div>
        </div>
    </div>
    <div class="container">
        <div class="pt-6 pb-6">
            <div class="row">
                <div class="col-md-6 pr-5 p-0">
                    <div class="container pt-6 mt-10  img-nosotros">
                        <img src="images/index/logo_pointed.png" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-md-6 pl-5 p-0">
                    <div class="container pr-0">
                        <h2 class="titulo-nosotros font-weight-light mt-5 mr-5 ml-5 m-0 pt1 mtop-1"> {{ $t("message.acercade") }} <span class="font-weight-bold">{{ $t("message.nosotros") }}</span></h2>
                        <p class="text-justify mt-5 ml-5 m-0">{{ $t("message.nosotrosUno") }}</p>
                        <br>
                        <p class="text-justifiy ml-5 m-0">{{ $t("message.nosotrosDos") }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>  
    <div class="section-mision">
        <div class="container">
            <div class="container pt-6">
                <div class="row">
                    <div class="col">
                        <div class="container p-0">
                            <h2 class="titulo-mision font-weight-light pb-4">{{ $t("message.titulomision") }} <span class="font-weight-bold">{{ $t("message.titulomisionDos") }}</span></h2>
                        </div>
                        <div class="container p-0">
                            <p class="text-justify text-white">{{ $t("message.mision") }}</p>
                        </div>
                    </div>
                    <div class="col">
                        <div class="container">
                                <h2 class="titulo-mision font-weight-light pb-4">{{ $t("message.titulovision") }} <span class="font-weight-bold">{{ $t("message.titulovisionDos") }}</span> </h2>
                        </div>
                        <div class="container p-0">
                            <p class="text-justify text-white">{{ $t("message.vision") }}</p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <div class="container card-encima">
        <div class="card">
            <div class="card-body pr-0 pt-0 pl-0 pb-0">
                <div class="row">
                    <div class="col-md-6">
                        <h2 class="titulo-nosotros text-center font-weight-light mt-5 pt-5 mb-5">Nuestros <span class="font-weight-bold">Valores</span></h2>
                        <p class="card-text text-justify pr-5 pl-5 mt-4 pd-1 pbutton-5">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus doloremque architecto eius, fuga, quam repellendus corporis corrupti ipsum, autem porro quasi fugiat omnis voluptatibus. Repellendus necessitatibus aut officia illum fugit!
                        </p>
                    </div>
                    <div class="col-md-6 pd-0">
                        <div class="container pd-0">
                            <img src="images/index/card_nosotros1.png" class="card-img img-fluid" alt="Nosotros">
                        </div>                       
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-valores">
    </div>



</section>

    <footer id="footer-vuejs">
        <?php include 'footer.html' ?>
    </footer>

    <div>
        <?php include 'modal-boletin.html' ?>
    </div>
    
    <script>
        $(window).load(function(){ $('.skeleton-header, .skeleton-body ,.skeleton-footer ').css('display','none'); $('header,.vittec-nosotros, .section-nosotros, .section-mision, .card-encima, .section-valores ,footer').css('display','block');}); $(".vittec-nosotros,.section-nosotros").mouseenter(function (){ $(".submenu-conoce").hide("slow"); $(".submenu-construye").hide("slow"); $("#optB").removeClass("active"); $("#optA").removeClass("active");});
    </script>

    <!--Axios-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js" integrity="sha256-XmdRbTre/3RulhYk/cOBUMpYlaAp2Rpo/s556u0OIKk=" crossorigin="anonymous"></script>
    <!-- Vue i18n -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    <script src="lang/app.js"></script>
    <script src="lang/footer-vue.js"></script>
    <script src="lang/header-vue.js"></script>
    <script src="js/boletin-vue.js"></script>     
</body>
</html>