JeanBenitez
/
SitioWebITTEC


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="ITTEC es una empresa dedicada al desarrollo de tecnologías de información, sistemas de misión crítica y consultoría para el control y optimización de procesos en las organizaciones.">
    <meta name="keywords" content="Consultoría, Desarrollo Web, Plataforma Educativa">
    <meta name="language" content="spanish">
    <meta name="copyright" content="ITTEC">
    <meta name="author" content="ITTEC">
    <meta name="audience" content="all">
    <meta name="robots" content="index, all, follow">

    <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/style-index.css" rel="stylesheet">
    <link href="css/style-blog.css" rel="stylesheet">
    <link href="css/lang-selector.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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <!-- 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">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Animate.Style -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <!-- PLYR LIBRARY -->
    <script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
    
</head>
<body>
    <script>
        
        $(window).scroll(function() {
            $('#objAnimation').each(function() {
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow + 500) {
                    $(this).addClass("slideRight");
                    $(".scrolldown").css('display','none');
                }
            });
        });
        
    </script>
    <div id="transition-container" class="container-fluid">
        <img id="imagen" class="img-fluid" src="images/index/testC.png"/>
        <div class="transition-bkground">
            <div class="panel panelwidth" id="p1"></div>
            <div class="panel panelwidth" id="p2"></div>
            <div class="panel panelwidth" id="p3"></div>
            <div class="panel panelwidth" id="p4"></div>
            <div class="panel panelwidth" id="p5"></div>
            <div class="panel panelwidth" id="p6"></div>
            <div class="panel panelwidth" id="p7"></div>
            <div class="panel panelwidth" id="p8"></div>
            <div class="panel panelwidth" id="p9"></div>
            <div class="panel panelwidth" id="p10"></div>
            <div class="panel panelwidth" id="p11"></div>
            <div class="panel panelwidth" id="p12"></div>
            <div class="panel panelwidth" id="p13"></div>
            <div class="panel panelwidth" id="p14"></div>
        </div>
    </div>
    <header id="header-vuejs">
        <?php  include 'header2.html' ?>
    </header>
    <section id="myapp">
        <div class="container-fluid">
            <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="skeleton-header-mb">
                <div class="row">
                    <div class="hd-skeleton-logo pulse" style="width: 12rem;">
                        <div class="card-body">
                            <div class="ph-picture" style="height: 75px;"></div>
                        </div>
                    </div>
                    <div class="hd-skeleton-card pulse" style="width: 6rem;margin-left:100px;">
                        <div class="card-body">
                            <div class="ph-picture" style="height: 50px"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skeleton-text col-md-5 centrado" id="skeleton-text">
                <div style="width: 90px;margin-left: 75px;">
                    <div class="ph-col-4 ph-picture pulse" style="height:90px;"></div>
                </div>
                <div class="ph-col-8" style="width:335px;">            
                    <div class="ph-row">
                        <div class="ph-col-12 big pulse"></div>
                        <div class="ph-col-12 empty pulse"></div>
                        <div class="ph-col-12 big pulse"></div>
                    </div>
                </div>
                <div style="width:532px;">
                    <div class="ph-col-8">
                        <div class="ph-row">
                            <div class="ph-col-12 big pulse"></div>
                            <div class="ph-col-12 big pulse"></div>
                            <div class="ph-col-6 big pulse"></div>
                            <div class="ph-col-4 empty big"></div>
                            <div class="ph-col-12 big pulse"></div>
                            <div class="ph-col-12 big pulse"></div>
                            
                        </div>
                        <div class="ph-col-6">
                            <div class="ph-col-6 ph-button pulse"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skeleton-parrafs">
                <div class="ph-col-8">
                    <div class="ph-row">
                        <div class="ph-col-12 empty"></div>
                        <div class="ph-col-12 empty"></div>
                        <div class="ph-col-12 empty"></div>

                        <div class="ph-col-2 empty"></div>
                        <div class="ph-col-8 big pulse"></div>
                        <div class="ph-col-2 empty"></div>

                            
                        <div class="ph-col-12 big pulse"></div>

                        <div class="ph-col-4 empty"></div>
                        <div class="ph-col-2 big pulse"></div>
                        <div class="ph col-4 empty"></div>
                        
                    </div>
                </div>
            </div>
            <div class="row skeleton-cards">
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></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-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>

                        </div>
                    </div>
                </div>
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-12"></div>

                            <div class="ph-col-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>

                        </div>
                    </div>
                </div>
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></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-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="container skeleton-video pulse">
                <div class="ph-picture video-sk" style="height:500px;"></div>
                <div class="ph-row">
                    <div class="ph-col-2 "></div>
                    <div class="ph-col-2 empty"></div>
                    <div class="ph-col-8 "></div>
                </div>
            </div>
            <div class="row skeleton-cards">
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></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-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>

                        </div>
                    </div>
                </div>
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-12"></div>

                            <div class="ph-col-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>

                        </div>
                    </div>
                </div>
                <div class="card-sk pulse" style="width: 18rem;">
                    <div class="ph-picture"></div>
                    <div class="card-body">
                        <div class="ph-row">
                            <div class="ph-col-12"></div>

                            <div class="ph-col-12 empty"></div>

                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-8"></div>
                            <div class="ph-col-2 empty "></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-4 empty"></div>
                            <div class="ph-col-4"></div>
                            <div class="ph-col-4 empty"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row skeleton-footer">
                <div class="ft-skeleton-card pulse" 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="ft-skeleton-card pulse" 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="ft-skeleton-card pulse" 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="ft-skeleton-card pulse" style="width: 18rem;">
                    <div class="card-body">
                        <div class="ph-picture img-sk"></div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="languajes" >
            <div class="lang-menu">
                <div id="select" class="selected-lang">
                </div>
                <ul id="opciones">
                        <li>
                            <a href="#" @click="cambiarIdioma('es');cambiarVideoIndex('https://www.ittec.mx/media/vittec_es.mp4');guardarIdioma('es')" class="es">{{ $t("message.esp") }}</a>
                        </li>
                        <li >
                            <a href="#"  @click="cambiarIdioma('en');cambiarVideoIndex('https://www.ittec.mx/media/vittec_en.mp4');guardarIdioma('en')" class="en">{{ $t("message.eng") }}</a>
                        </li>                    
                </ul>
            </div>
        </div>
        <div id="box" class="box">        
            <div class="triangulo">
                <img class="img-fluid padding-top tr-wd" src="images/index/triangle_transparent.png" style="width: 100%;">
                <img src="images/index/rectangulo3B.png" alt="" class="img-fluid rec-wd">
            </div>
            <div class="logo-i"></div>
            <div id="isotipo-ittec" class="container">
                <img width="90px" src="images/index/icon-i.png" alt="">
            </div>
            <div id="texto" class="col-md-5 centrado">
                <div id="txtA" class="txt-tablet">        
                    <h1 class="texto-blanco title-principal font-weight-bold text-left">{{ $t("message.trianguloTitulo") }}</h1>
                </div>
                <div id="txtB" class="txt-parrafo">
                    <p class="texto-blanco text-justify text-principal">
                    {{ $t("message.trianguloParrafoUno") }} <strong class="hover-negro"><a class="a-text deco fill-text" href="#" data-hover="soluciones">{{ $t("message.trianguloBoldUno") }}</a></strong> {{ $t("message.trianguloParrafoDos") }}
                    </p>
                    <p class="texto-blanco text-justify text-principal">
                        <strong class="hover-negro"><a class="a-text deco fill-text" href="#" data-hover="Desarrollamos">{{ $t("message.trianguloBoldDos") }}</a></strong> {{ $t("message.trianguloParrafoTres") }} <br><strong class="hover-negro"><a href="#" data-hover="visión de futuro." id="vision" class="fill-text text-fill-vision a-text">{{ $t("message.trianguloBoldtres") }}.</a></strong>
                    </p>
                </div>
                <div id="txtC" class="txt-boton">
                    <div class="text-left">
                        <a href="nosotros" class="btn button-nosotros">
                            <h4 class="h4-button">{{ $t("message.botontext") }}</h4>
                        </a>
                    </div>
                </div>
            </div>
            <div class="container img-overlay" id="div-imgOverlay">
                <img id="img-overlay" class="img-fluid" src="images/index/img_overlayA.png" alt="consultoria">
            </div>
            <div class="">
                <div class="row">
                    <div class="col">
                        <div class="scrolldown">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div id="objAnimation" class="mt-3 text-slider">
                    <div class="txt-titulo">
                        <h1 class="texto-blanco font-weight-bold text-center title-principal p-4">{{ $t("message.tituloFuturo") }}</h1><br>
                    </div>
                    <div class="txt-parrafomov">
                        <div class="row">
                            <div class="col-md-1"></div>
                            <div class="col-md-10">
                                <p class="texto-blanco text-center text-principal prl-4 ">{{ $t("message.futuroParrafoUno") }}<strong><a class="bold-letter">{{ $t("message.futuroBoldUno") }}</a></strong> 
                                {{ $t("message.futuroParrafoDos") }} <strong><a class="bold-letter">{{ $t("message.futuroBoldDos") }}</a></strong></p>
                            </div>
                            <div class="col-md-1"></div>
                        </div>
                    </div>
                </div>       
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-3"></div>
        </div>
        <div class="bakcgroud-verde"></div> 
        <div id="bloque2" class="row bakcgroud-ittec">
            <div class="container title-areas mx-auto d-flex flex-row justify-content-center alig-items-center" style="width:auto;height: 150px;">
                <p class="mt-5 pt-2 slideDown">{{ $t("message.soluciones") }}</p>
            </div>
            <div class="bakcgroud-ittec-2 top-video">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <video id="player" class="player" :src="vittecIndex" ref="vittecIndex" style="--plyr-color-main: #1ac266;--plyr-control-icon-size:25px;" playsinline controls >
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="parallax-cards">
            <div class="">
                <div class="container">
                    <div class="col-12 top-cards pt-5 pb-5">
                        <section class="regular slider pt-5">
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Facturacion-electronica0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardfactura") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardfacturatext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Concilia0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardconciliacion") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardconciliaciontext") }}</p>
                                </div>
                            </div>
                            <div class="container ">
                                <div class="card card-body zoom ">
                                    <img src="images/index/Validacion-de-CFDIA.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardvalidacion") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardvalidaciontext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Desarrollo-de-software0.png" class="encimado servicios profile-img" alt="" >
                                    <h4 class="text-center padding"><strong>{{ $t("message.carddesarrollo") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.carddesarrollotext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Disenio-digitalA.png" class="encimado servicios profile-img" alt="" style="width: 120px;" >
                                    <h4 class="text-center padding "><strong>{{ $t("message.carddisenio") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.carddiseniotext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/plataf0.png" class="encimado servicios profile-img" alt="" style="width: 120px;" >
                                    <h4 class="text-center padding "><strong>{{ $t("message.cardplataforma") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardplataformatext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Control-de-inventario0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardinventario") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardinventariotext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Outsourcing0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardoutsourcing") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardoutsourcingtext") }}</p>
                                </div>
                            </div>

                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Nomina-electronica0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardnomina") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardnominatext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Contabilidad-electronica0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardcontabilidad") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardcontabilidadtext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Control-cobranza0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardcobranza") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardcobranzatext") }}</p>
                                </div>
                            </div>

                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Aplicaciones-web0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardaplicaciones") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardaplicacionestext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Inteligencia-artificial0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardia") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardiatext") }}</p>
                                </div>
                            </div>
                            <div class="container">
                                <div class="card card-body zoom">
                                    <img src="images/index/Big-data0.png" class="encimado servicios profile-img" alt="">
                                    <h4 class="text-center padding"><strong>{{ $t("message.cardbigdata") }}</strong></h4>
                                    <p class="text-center">{{ $t("message.cardbigdatatext") }}</p>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="container">
                    <div class="row">
                        <div class="col-md-4 justify-content-center mt-5 ">
                            <div class="shadow cardhover">
                                <img class="card-img-top" src="images/index/card_2.jpg" alt="Soporte 24 horas">
                                <div class="card-body">
                                    <h4 class="card-title text-verde">Soporte las 24 horas del día</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 justify-content-center  mt-5">
                            <div class="shadow cardhover">
                                <img class="card-img-top" src="images/index/card_1.jpg" alt="Almacenamiento">
                                <div class="card-body">
                                    <h4 class="card-title text-verde">Almacenamiento hasta 72 horas</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 justify-content-center  mt-5">
                            <div class="shadow cardhover">
                                <img class="card-img-top " src="images/index/card_3.jpg" alt="Sistemas">
                                <div class="card-body ">
                                    <h4 class="card-title text-verde">Integración con otros sistemas</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>     
        </div>
        <section id="bloque1" class="trans-bloque1">
            <div class="torniquete">
                <div class="row">
                    <div class="col-8 pr-0 video">
                        <video preload="auto" autoplay="autoplay" loop muted>
                            <source src="https://www.ittec.mx/media/vittec_mundo.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="col-4 pl-0 black-bg">
                        <div class="container slidervert">
                            <div class="slider-vertical">
                                <div class="container">
                                    <div class="texto-mundo">
                                        <h4 class="text-white">{{ $t("message.alcanceglobal") }}</h4>
                                        <p class="text-white text-justify">{{ $t("message.alcanceglobaltext") }}</p>
                                    </div>
                                </div>
                                <div class="container">
                                    <div class="texto-mundo">
                                        <h4 class="text-white">{{ $t("message.seguridadinfo") }}</h4>
                                        <p class="text-white text-justify">{{ $t("message.seguridadinfotext") }}</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div id="div">
                        <ul class="animate-diagon-down">

                            <li class="animate-first">
                                <div class="content-info scalediv">
                                    <div class="title-div">
                                        9+
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transexperiencetxt") }}
                                    </p>
                                </div>
                            </li>
                            
                            <li class="animate-second">
                                <div class="content-info scaledivsec">
                                    <div class="title-div">
                                        8
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transbusinesstxt") }}
                                    </p>
                                </div>
                            </li>
                            <li class="animate-third">
                                <div class="content-info scaledivthr">
                                    <div class="title-div">
                                        500+
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transcustomerstxt") }}
                                    </p>
                                </div>
                            </li>

                            <li class="animate-fourth">
                                <div class="content-info scaledivfour">
                                    <div class="title-div">
                                        6
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transconsultingtxt") }}
                                    </p>
                                </div>
                            </li>
                            <li class="animate-fifth">
                                <div class="content-info scaledivfive">
                                    <div class="title-div">
                                        5+
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transfortunetxt") }}
                                    </p>
                                </div>
                            </li>
                            <li class="animate-sixth">
                                <div class="content-info scaledivsix">
                                    <div class="title-div">
                                        99.98%
                                    </div>
                                    <p class="text-div">                                
                                    {{ $t("message.transserviciostxt") }}
                                    </p>
                                </div>
                            </li>
                            <li class="animate-seventh">
                                <div class="content-info scaledivseven">
                                    <div class="title-div">
                                        300+
                                    </div>
                                    <p class="text-div">
                                    {{ $t("message.transdevelopmentstxt") }}
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <div id="cards-ends" class="parallax-cards pb-5">
            <div class="cards-end">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 justify-content-center mt-5 ">
                            <div class="shadow cardhover">
                                <img class="card-img-top" src="images/index/card_2.jpg" alt="Soporte 24 horas">
                                <div class="card-body">
                                    <h4 class="card-title text-verde">Soporte las 24 horas del día</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 justify-content-center  mt-5">
                            <div class="shadow cardhover">
                                <img class="card-img-top" src="images/index/card_1.jpg" alt="Almacenamiento">
                                <div class="card-body">
                                    <h4 class="card-title text-verde">Almacenamiento hasta 72 horas</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 justify-content-center  mt-5">
                            <div class="shadow cardhover">
                                <img class="card-img-top " src="images/index/card_3.jpg" alt="Sistemas">
                                <div class="card-body ">
                                    <h4 class="card-title text-verde">Integración con otros sistemas</h4>
                                    <p class="card-text ">Desde corporativos nacionales hasta pequeñas empresas, nuestras soluciones transforman la operación de las empresas. Desarrollamos aplicaciones de TI con visión de futuro.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="parallax-cards">
           <div class="container">
            <div class="container title-areas mx-auto d-flex flex-row justify-content-center alig-items-center" style="width:auto;height: 150px;">
                <p class="mt-5 pt-2 slideDown">{{$t("message.ultimospost")}}</p>
            </div>
            <div class="row">
                <articulo  
                    id="my-data" 
                    v-for="publicacion in filtrolatestPub" 
                    :key="publicacion.id" 
                    v-bind:publicacion="publicacion"
                    v-bind:txtbtn="verMas">
                </articulo>
            </div>
        </div> 
        </div>     
    </section>
    <footer id="footer-vuejs">
        <?php include 'footer.html' ?>
        
    </footer>
    <div>
        <?php include 'modal-boletin.html' ?>
    </div>
        <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></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>
    <!-- Bootstrap vue -->
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
    <!-- Bootstap Vue Icons -->
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.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>
    <script src="css/slick/slick.js" type="text/javascript" charset="utf-8"></script>
    <script>

        const player = new Plyr('#player', {
            title: 'VITTEC',
            controls: [
                'play-large', // The large play button in the center
                'restart', // Restart playback
                'rewind', // Rewind by the seek time (default 10 seconds)
                'play', // Play/pause playback
                'fast-forward', // Fast forward by the seek time (default 10 seconds)
                'progress', // The progress bar and scrubber for playback and buffering
                'current-time', // The current time of playback
                'duration', // The full duration of the media
                'mute', // Toggle mute
                'volume', // Volume control
                'fullscreen', // Toggle fullscreen
            ]
        });
        $(window).load(function() {
            $('.skeleton-header, .skeleton-header-mb, .skeleton-text, .skeleton-parrafs, .skeleton-cards, .skeleton-video, .skeleton-footer ').css('display','none');
            $('header,#myapp,#transition-container, .transition-bkground, .logo-i, .box, .bakcgroud-ittec, .bakcgroud-ittec-2, .bakcgroud-ittec-3, .fondo-ittec, #bloque1, .parallax-cards ,#cards-ends, footer').css('display','block');
        });
        $("#optA").mouseout(function(){
            $(this).removeClass('active');
        });
        $("#submenu-conoce").mouseenter(function(){
            $("#optA").addClass('active');
        });
        $("#optB").mouseout(function(){
            $(this).removeClass('active');
        });
        $("#submenu-construye").mouseenter(function(){
            $("#optB").addClass('active');
        });
        $("#optC").mouseout(function(){
            $(this).removeClass('active');
        });
        $(document).on('ready', function() {

            $('.slider-vertical').slick({
                dots: false,
                arrows: false,
                vertical: true,
                autoplay: true,
                autoplaySpeed:7500,
                slidesToShow: 1,
                slidesToScroll: 1,
                verticalSwiping: true,
            });

            $(".regular").slick({
                autoplay: true,
                autoplaySpeed:5000,
                dots: true,
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1,
                responsive: [{
                    breakpoint: 1156,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },{
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },{
                    breakpoint: 995,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                }, {
                    breakpoint: 690,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                }, {
                    breakpoint: 610,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                }, {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 2,
                        infinite: true,
                        dots: true,
                        arrows: false,                        
                    }
                }, {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true,
                        arrows: false,
                        mobileFirst: true   
                    }
                }, {
                    breakpoint: 300,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true,
                        arrows: false,
                        mobileFirst: true
                    }

                }]
            });
        });
        $('#box, .bakcgroud-verde, #bloque2').mouseenter(function() {
            $('.submenu-conoce').hide('slow');
            $('.submenu-construye').hide('slow');
        })      
        var actual = 0;
        var imagenes = ["testC.png","testB.png","testD.png","testE.png","testA.png"];
        var anchopanel = $(".panelwidth").width();
        function reset() {
            var paneles = document.getElementsByClassName("panel");
            for (i = 0; i < paneles.length; i++) {
                paneles[i].style.backgroundImage = "none";
                paneles[i].style.backgroundSize = "cover";
                paneles[i].style.backgroundPosition = "center";
                paneles[i].style.width = anchopanel + "px";
            }
        }
        function verimagen(num) {
            var imagen = document.images[0];
            var anterior = imagen.src;
            var paneles = document.getElementsByClassName("panel");
            for (i = 0; i < paneles.length; i++) {
                paneles[i].style.backgroundImage = "url('" + anterior + "')";
                paneles[i].style.width = "0px";
            }
            imagen.src = "./images/index/" + imagenes[num];
            setTimeout("reset()", 3000);
        }
        function siguiente() {
            actual++;
            if (actual >= imagenes.length) {
                actual = 0;
            }
            verimagen(actual);
        }  
        var contador = 0;
        var imgsOverlay = ["img_overlayA.png","img_overlayB.png","img_overlayC.png","img_overlayD.png","img_overlayE.png"];
        function changeImgSrc(num){
            document.getElementById("img-overlay").src="./images/index/"+imgsOverlay[num];
        }
        function nextImg(){
            contador++;
            if(contador >= imgsOverlay.length){
                contador = 0;
            }     
            animateCSS('#div-imgOverlay', 'fadeIn');       
            changeImgSrc(contador);
        }  
        $("document").ready(function(){
            setInterval("siguiente()", 7500);  
            setInterval("nextImg()", 7500);          
        });
        $("document").ready(function(){
            updateDivText();
            $(window).resize(function(){
                updateDivText();
            })
           
        })
        var es_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        if(es_chrome){
            var scwd = screen.width;
            if(scwd <= 1366){
                $("#vision").removeClass('text-fill-vision');
            }            
        }
        function updateDivText() {
            var scwid = $(window).width();
            if( scwid <= 570 ) {
                $('#isotipo-ittec').addClass("d-flex flex-row justify-content-center alig-items-center");
                $('#texto').removeClass("col-md-5");
                $('#texto').removeClass("centrado");
                $('#texto').addClass("container");
                $('#texto').css("position","absolute");
                $('#texto').css("top","23em");
                $('#txtA').removeClass("txt-tablet");
                $('#txtA h1').removeClass("text-left");
                $('#txtA h1').addClass("text-center");
                $('#txtA').addClass("mt-3");
                $('#txtB').removeClass("txt-parrafo");
                $('#txtB').addClass("text-justify mt-4 col-12");
                $('#txtC').removeClass("txt-boton");
                $('#txtC').addClass("mt-4 d-flex flex-row justify-content-center alig-items-center");
            }

            if(scwid >= 571) {
                $('#isotipo-ittec').removeClass("d-flex flex-row justify-content-center alig-items-center");
                $('#texto').addClass("col-md-5");
                $('#texto').addClass("centrado");
                $('#texto').removeClass("container");
                $('#texto').css("position","");
                $('#texto').css("top","");
                $('#txtA').addClass("txt-tablet");
                $('#txtA h1').addClass("text-left");
                $('#txtA h1').removeClass("text-center");
                $('#txtA').removeClass("mt-3");
                $('#txtB').addClass("txt-parrafo");
                $('#txtB').removeClass("text-justify mt-4 col-12");
                $('#txtC').addClass("txt-boton");
                $('#txtC').removeClass("mt-4 d-flex flex-row justify-content-center alig-items-center");
            }
        }

        const animateCSS = (element, animation, prefix = 'animate__') =>
        new Promise((resolve, reject) => {
            const animationName = `${prefix}${animation}`;
            const node = document.querySelector(element);
            node.classList.add(`${prefix}animated`, animationName);
            function handleAnimationEnd() {
            node.classList.remove(`${prefix}animated`, animationName);
            node.removeEventListener('animationend', handleAnimationEnd);
            resolve('Animation ended');
            }
            node.addEventListener('animationend', handleAnimationEnd);
        });
    </script>

    
</body>
</html>