Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width" />
    <title>Arturo Cabrera</title>
    <!--Mi estilo-->
    <link rel="stylesheet" type="text/css" href="https://pixmy.github.io/style.css">
    <!--Font awesome-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
    <!--FONTS-->
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="https://pixmy.github.io/toggles-full.css">
    <!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!--Animate-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js" type="text/javascript"></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>
</head>


<body>
    <div class="background"></div>


        <div class="toggle toggle-soft"></div>
    <div class="hire" id="hire"><i class="fa fa-handshake-o animated swing infinite"></i>
        <div class="info display"><div class="correo"><span class="espanol">pixmycode@gmail.com</span>
            <span class="ingles">pixmycode@gmail.com</span></div>
            <div class="tel"><i class="fa"></i></div>
        </div>
        <span class="espanol">Cotratame</span>
        <span class="ingles">Hire me</span>
    </div>


        <div class="start">


        <div class='box'>
            <div class='wave -one'></div>
            <div class='wave -two'></div>
            <div class='wave -three'></div>
        </div>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="center">
                <div class="nombre animated fadeInLeft"><p>AR</p><p>TU</p><p>RO</p></div>
                <div class="iam animated fadeInLeft">
                <span class="espanol">Programador</span>
                <span class="ingles">Developer</span> | UI Styler</div>
            </div>
        </div>

    <div class="body" id="body"> 
        <div class="square" id="first">
            <div class="squareTitle">
                <span class="espanol">Sobre mí</span>
                <span class="ingles">About me</span>
                <span class="squareSubTitle ingles">Hello! get to know me</span>
                <span class="squareSubTitle espanol">Hola! conoceme</span>
            </div>
            <div class="squareImage show1 hidden"><img class="image yo" src="https://s20.postimg.cc/hp1mhy2d9/arturo_1.png" style="background-color:white;"></div>
            <div class="squareText sobreMi show1 hidden">
                <p class="espanol">
                    Me llamo Arturo Cabrera, soy del estado de Guanajuato y me encanta diseñar páginas web, me gusta dar esa primera impresión la cual hace que el usuario se quede dentro de la página, además <i class="fa fa-heart"></i> la programación y me gusta siempre llegar a una solución óptima para el cliente ya sea individualmente o en equipo.
                    Soy un alumno recién egresado del Instituto Tecnológico Superior del Sur de Guanajuato, pero he tenido varias experiencias laborales.
                    <p class="espanol">Por último quiero mencionar que mi Inglés es Avanzado.</p>
                </p>
                <p class="ingles">              
                    My name is Arturo Cabrera, I'm from the state of Guanajuato and I love to design websites, I like to give that first impression which makes the user to stay within the page, plus <i class = "fa fa-heart"> </i> programming and always arrive at an optimal solution for the customer either individually or in teams.
                    I am a recent graduate of Instituto Tecnológico del sur de Guanajuato student, but I have had several work experiences.
                    <p class="ingles">Finally I want to mention that my English is Advanced.</p>
                </p>
            </div>
        </div>

        <div class="square" id="second">
            <div class="squareTitleRight">
                <span class="espanol">Mis habilidades</span>
                <span class="ingles">My abilities</span>
                <span class="squareSubTitle espanol">Puntos fuertes de mí</span>
                <span class="squareSubTitle ingles">Knowledge in...</span>
            </div>
            <div class="squareText show2 hidden">
                <div class="habilidades">
                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051 90.197-36.192 10.033z"></path><path fill="#F16529" d="M64 118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB" d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969 2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034 1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-5.143v5.633h-5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-5.911h5.865v16.822h-5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-16.822zM86.591 1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34 3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962 44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress html">80%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#131313" d="M89.234 5.856h-7.384l7.679 8.333v3.967h-15.816v-4.645h7.678l-7.678-8.333v-3.971h15.521v4.649zm-18.657 0h-7.384l7.679 8.333v3.967h-15.817v-4.645h7.679l-7.679-8.333v-3.971h15.522v4.649zm-18.474.19h-7.968v7.271h7.968v4.839h-13.632v-16.949h13.632v4.839z"></path><path fill="#1572B6" d="M27.613 116.706l-8.097-90.813h88.967l-8.104 90.798-36.434 10.102-36.332-10.087z"></path><path fill="#33A9DC" d="M64.001 119.072l29.439-8.162 6.926-77.591h-36.365v85.753z"></path><path fill="#fff" d="M64 66.22h14.738l1.019-11.405h-15.757v-11.138h27.929000000000002l-.267 2.988-2.737 30.692h-24.925v-11.137z"></path><path fill="#EBEBEB" d="M64.067 95.146l-.049.014-12.404-3.35-.794-8.883h-11.178999999999998l1.561 17.488 22.814 6.333.052-.015v-11.587z"></path><path fill="#fff" d="M77.792 76.886l-1.342 14.916-12.422 3.353v11.588l22.833-6.328.168-1.882 1.938-21.647h-11.175z"></path><path fill="#EBEBEB" d="M64.039 43.677v11.136999999999999h-26.903000000000002l-.224-2.503-.507-5.646-.267-2.988h27.901zM64 66.221v11.138h-12.247l-.223-2.503-.508-5.647-.267-2.988h13.245z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress css">75%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#F0DB4F" d="M2 1v125h125v-125h-125zm66.119 106.513c-1.845 3.749-5.367 6.212-9.448 7.401-6.271 1.44-12.269.619-16.731-2.059-2.986-1.832-5.318-4.652-6.901-7.901l9.52-5.83c.083.035.333.487.667 1.071 1.214 2.034 2.261 3.474 4.319 4.485 2.022.69 6.461 1.131 8.175-2.427 1.047-1.81.714-7.628.714-14.065-.001-10.115.046-20.188.046-30.188h11.709c0 11 .06 21.418 0 32.152.025 6.58.596 12.446-2.07 17.361zm48.574-3.308c-4.07 13.922-26.762 14.374-35.83 5.176-1.916-2.165-3.117-3.296-4.26-5.795 4.819-2.772 4.819-2.772 9.508-5.485 2.547 3.915 4.902 6.068 9.139 6.949 5.748.702 11.531-1.273 10.234-7.378-1.333-4.986-11.77-6.199-18.873-11.531-7.211-4.843-8.901-16.611-2.975-23.335 1.975-2.487 5.343-4.343 8.877-5.235l3.688-.477c7.081-.143 11.507 1.727 14.756 5.355.904.916 1.642 1.904 3.022 4.045-3.772 2.404-3.76 2.381-9.163 5.879-1.154-2.486-3.069-4.046-5.093-4.724-3.142-.952-7.104.083-7.926 3.403-.285 1.023-.226 1.975.227 3.665 1.273 2.903 5.545 4.165 9.377 5.926 11.031 4.474 14.756 9.271 15.672 14.981.882 4.916-.213 8.105-.38 8.581z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress js">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#0868AC" d="M27.758 20.421c-7.352 10.565-6.437 24.312-.82 35.54l.411.798.263.506.164.291.293.524c.174.307.353.612.536.919l.306.504c.203.326.41.65.622.973l.265.409c.293.437.592.872.901 1.301l.026.033.152.205c.267.368.542.732.821 1.093l.309.393c.249.313.502.623.759.934l.29.346c.345.406.698.812 1.057 1.208l.021.022.041.045c.351.383.71.758 1.075 1.133l.344.347c.282.284.569.563.858.841l.351.334c.387.364.777.722 1.176 1.07l.018.016.205.174c.351.305.708.605 1.068.902l.442.353c.294.235.591.468.89.696l.477.361c.33.243.663.482.999.717l.363.258.101.072c.318.22.645.431.97.642l.42.28c.5.315 1.007.628 1.519.93l.42.237c.377.217.756.431 1.14.639l.631.326.816.424.188.091.334.161c.427.204.858.405 1.293.599l.273.122c.498.218 1.001.427 1.508.628l.368.144c.469.182.945.359 1.423.527l.179.062c.524.184 1.054.353 1.587.52l.383.114c.542.164 1.079.358 1.638.462 35.553 6.483 45.88-21.364 45.88-21.364-8.674 11.3-24.069 14.28-38.656 10.962-.553-.125-1.089-.298-1.628-.456l-.406-.124c-.526-.161-1.049-.33-1.568-.51l-.215-.077c-.465-.164-.924-.336-1.382-.513l-.388-.152c-.501-.198-1-.405-1.492-.62l-.298-.133c-.423-.191-.842-.384-1.259-.585l-.364-.175c-.327-.159-.65-.328-.974-.495l-.649-.341c-.395-.21-.782-.43-1.167-.654l-.394-.219c-.513-.303-1.019-.615-1.52-.932l-.41-.273c-.363-.234-.725-.473-1.081-.719l-.349-.245c-.344-.242-.685-.489-1.022-.738l-.453-.343c-.31-.237-.618-.476-.922-.721l-.411-.33c-.388-.318-.771-.64-1.149-.969l-.126-.105c-.409-.359-.811-.728-1.208-1.098l-.34-.328c-.294-.279-.584-.561-.868-.851l-.34-.34c-.362-.37-.717-.745-1.065-1.126l-.053-.057c-.368-.402-.728-.813-1.08-1.229l-.283-.336c-.263-.316-.523-.638-.777-.961l-.285-.355c-.307-.397-.605-.793-.898-1.195-8.098-11.047-11.008-26.283-4.535-38.795M50.578 11.519c-5.316 7.65-5.028 17.893-.88 25.983.695 1.356 1.477 2.673 2.351 3.925.796 1.143 1.68 2.501 2.737 3.418.383.422.784.834 1.193 1.238l.314.311c.397.385.801.764 1.218 1.132l.05.043.012.012c.462.405.939.794 1.423 1.178l.323.252c.486.372.981.738 1.489 1.087l.043.033.68.447.322.213c.363.233.73.459 1.104.676l.156.092c.322.185.648.367.975.545l.347.18.682.354.103.047c.469.23.941.453 1.424.663l.314.13c.386.163.775.323 1.167.473l.5.184c.356.132.712.253 1.072.373l.484.155c.511.158 1.017.359 1.549.448 27.45 4.547 33.787-16.588 33.787-16.588-5.712 8.228-16.775 12.153-28.58 9.089-.524-.138-1.042-.288-1.555-.449l-.467-.151c-.365-.117-.728-.243-1.087-.374l-.491-.183c-.394-.152-.784-.309-1.171-.473l-.315-.133c-.485-.211-.962-.434-1.432-.666l-.718-.365-.414-.213c-.306-.166-.61-.338-.909-.514l-.217-.123c-.372-.217-.738-.44-1.1-.672l-.332-.221-.712-.472c-.506-.349-.999-.714-1.484-1.085l-.334-.264c-5.167-4.079-9.263-9.655-11.21-15.977-2.041-6.557-1.601-13.917 1.935-19.891M69.771 4.868c-3.134 4.612-3.442 10.341-1.267 15.435 2.293 5.407 6.992 9.648 12.477 11.66l.682.235.3.096c.323.102.644.22.978.282 15.157 2.929 19.268-7.777 20.362-9.354-3.601 5.185-9.653 6.43-17.079 4.627-.586-.142-1.231-.354-1.796-.555-.725-.259-1.439-.553-2.134-.886-1.318-.634-2.575-1.402-3.741-2.282-6.645-5.042-10.772-14.659-6.436-22.492"></path><path fill="#131B28" d="M66.359 96.295h-4.226c-.234 0-.467.188-.517.417l-1.5 6.94-1.5 6.94c-.049.229-.282.417-.516.417h-2.991c-2.959 0-2.617-2.047-2.011-4.851l.018-.085.066-.354.012-.066.135-.72.145-.771.154-.785.682-3.332.683-3.332c.047-.23-.107-.419-.341-.419h-4.337c-.234 0-.466.188-.514.418l-.933 4.424-.932 4.425-.002.006-.086.412c-1.074 4.903-.79 9.58 5.048 9.727l.17.003h9.163c.234 0 .467-.188.516-.417l1.976-9.289 1.976-9.29c.049-.23-.103-.417-.338-.418zM21.103 96.246h-4.64c-.235 0-.469.188-.521.416l-.44 1.942-.44 1.942c-.051.229.098.416.333.416h4.676c.235 0 .468-.188.518-.417l.425-1.941.425-1.941c.049-.229-.101-.417-.336-.417zM19.757 102.29h-4.677c-.234 0-.469.188-.521.416l-.657 2.91-.656 2.909-.183.834-.631 2.97-.63 2.971c-.049.229-.15.599-.225.821 0 0-.874 2.6-2.343 2.57l-.184-.004-1.271-.023h-.001c-.234-.003-.469.18-.524.407l-.485 2.039-.484 2.038c-.055.228.093.416.326.42.833.01 2.699.031 3.828.031 3.669 0 5.604-2.033 6.843-7.883l1.451-6.714 1.361-6.297c.049-.227-.103-.415-.337-.415zM105.874 100.716l-.194-.801-.191-.82-.097-.414c-.38-1.477-1.495-2.328-3.917-2.328l-3.77-.004-3.472-.005h-3.907c-.234 0-.466.188-.515.417l-.173.816-.204.964-.057.271-1.759 8.24-1.67 7.822c-.05.23-.066.512-.038.626.028.115.479.209.713.209h3.524c.235 0 .532-.042.66-.094s.317-.513.364-.742l.626-3.099.627-3.1.001-.005.084-.413.76-3.56.671-3.144c.05-.229.281-.416.515-.417l11.089-.005c.235.002.383-.185.33-.414zM120.149 93.476l-.854.003h-3.549c-.235 0-.536.159-.667.353l-7.849 11.498c-.132.194-.283.166-.335-.062l-.578-2.533c-.052-.229-.287-.416-.522-.416h-5.045c-.235 0-.374.184-.31.409l2.261 7.921c.064.226.069.596.011.824l-.985 3.833c-.059.228.085.413.32.413h4.987c.234 0 .474-.186.532-.413l.986-3.833c.058-.229.221-.567.363-.755l12.742-16.911c.142-.188.065-.341-.169-.339l-1.339.008zM80.063 103.395v-.004c-.029.254-.264.441-.499.441h-6.397c-.222 0-.334-.15-.301-.336l.006-.015-.004.002.003-.021.029-.109c.611-1.624 1.855-2.69 4.194-2.69 2.634-.001 3.148 1.285 2.969 2.732zm-1.877-7.384c-8.211 0-10.157 4.984-11.249 10.015-1.091 5.128-.998 9.921 7.5 9.921h1.03l.256-.001h.06l1.02-.003h.018c2.244-.009 4.495-.026 5.406-.033.233-.004.461-.191.509-.42l.344-1.681.067-.327.41-2.006c.047-.229-.106-.418-.341-.418h-7.639c-3.039 0-3.941-.807-3.608-3.181h12.211l-.001.001.008-.001c.194-.003.374-.137.445-.315l.029-.106-.001.001c1.813-6.839 1.293-11.445-6.474-11.446zM39.376 103.369l-.116.409v.001l-.922 3.268-.922 3.267c-.063.227-.308.411-.543.411h-4.88c-3.702 0-4.604-2.896-3.702-7.166.901-4.368 2.668-7.083 6.312-7.358 4.98-.376 5.976 3.126 4.773 7.168zm3.348 7.105s2.301-5.588 2.823-8.814c.713-4.319-1.45-10.585-9.804-10.585-8.306 0-11.914 5.981-13.29 12.484-1.376 6.55.427 12.293 8.686 12.246l6.516-.024 6.089-.022c.234-.002.474-.188.534-.414l1.061-4.046c.059-.228-.084-.414-.319-.416l-1.017-.006-1.017-.006c-.199-.001-.313-.131-.289-.302l.027-.095zM83.844 106.733c0 .155-.125.281-.28.281-.154 0-.28-.126-.28-.281 0-.154.125-.279.28-.279.155 0 .28.125.28.279z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress jquery">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#5B4282" d="M9.531 112.586h4.161c1.896 0 3.273.27 4.129.81.857.54 1.285 1.398 1.285 2.575 0 .799-.188 1.454-.563 1.966s-.874.82-1.496.924v.091c.848.189 1.459.543 1.834 1.061s.563 1.207.563 2.067c0 1.22-.44 2.171-1.322 2.854-.881.683-2.078 1.024-3.59 1.024h-5.001v-13.372zm2.835 5.296h1.646c.768 0 1.325-.119 1.669-.356.345-.238.517-.631.517-1.18 0-.512-.187-.879-.562-1.102s-.968-.334-1.779-.334h-1.491v2.972zm0 2.25v3.485h1.848c.78 0 1.356-.149 1.729-.448s.558-.756.558-1.372c0-1.109-.793-1.665-2.378-1.665h-1.757zM34.252 119.254c0 2.213-.549 3.915-1.646 5.104s-2.67 1.784-4.719 1.784-3.622-.595-4.719-1.784c-1.098-1.189-1.646-2.896-1.646-5.122s.55-3.925 1.651-5.099 2.678-1.761 4.733-1.761 3.626.592 4.715 1.774c1.087 1.183 1.631 2.885 1.631 5.104zm-9.758 0c0 1.494.283 2.619.851 3.375.567.756 1.414 1.134 2.542 1.134 2.262 0 3.393-1.503 3.393-4.509 0-3.012-1.125-4.518-3.375-4.518-1.128 0-1.979.379-2.552 1.139s-.859 1.885-.859 3.379zM49.161 119.254c0 2.213-.549 3.915-1.646 5.104s-2.67 1.784-4.719 1.784-3.622-.595-4.719-1.784c-1.098-1.189-1.646-2.896-1.646-5.122s.55-3.925 1.651-5.099 2.678-1.761 4.733-1.761 3.626.592 4.715 1.774c1.086 1.183 1.631 2.885 1.631 5.104zm-9.759 0c0 1.494.283 2.619.851 3.375.567.756 1.414 1.134 2.542 1.134 2.262 0 3.393-1.503 3.393-4.509 0-3.012-1.125-4.518-3.375-4.518-1.128 0-1.979.379-2.552 1.139s-.859 1.885-.859 3.379zM57.09 125.958h-2.835v-11.012h-3.631v-2.36h10.097v2.36h-3.631v11.012zM70.671 122.245c0 1.208-.434 2.159-1.303 2.854-.869.695-2.078 1.043-3.626 1.043-1.427 0-2.689-.269-3.786-.805v-2.634c.902.402 1.666.686 2.291.851s1.196.247 1.715.247c.622 0 1.099-.119 1.431-.356.333-.238.499-.591.499-1.061 0-.262-.073-.495-.219-.7-.146-.204-.361-.401-.645-.59s-.861-.491-1.733-.905c-.817-.384-1.43-.753-1.838-1.107-.409-.354-.735-.765-.979-1.234-.244-.47-.366-1.019-.366-1.646 0-1.183.401-2.113 1.203-2.79s1.91-1.015 3.325-1.015c.695 0 1.358.082 1.989.247.631.165 1.291.396 1.98.695l-.915 2.204c-.713-.292-1.303-.497-1.77-.613-.467-.116-.925-.174-1.376-.174-.537 0-.948.125-1.235.375-.287.25-.43.576-.43.979 0 .25.058.468.174.654.116.186.3.366.553.54.253.174.852.486 1.797.938 1.25.598 2.107 1.197 2.57 1.797s.694 1.334.694 2.206zM78.254 125.958h-2.835v-11.012h-3.631v-2.36h10.097v2.36h-3.631v11.012zM86.778 120.827v5.131h-2.835v-13.372h3.896c1.817 0 3.161.331 4.033.992.872.662 1.308 1.667 1.308 3.014 0 .787-.216 1.486-.649 2.099s-1.046 1.093-1.838 1.44c2.012 3.006 3.323 4.948 3.933 5.826h-3.146l-3.192-5.131h-1.51zm0-2.305h.915c.896 0 1.558-.149 1.985-.448s.64-.769.64-1.409c0-.634-.218-1.085-.654-1.354-.436-.268-1.111-.402-2.026-.402h-.86v3.613zM104.494 125.958l-.97-3.183h-4.875l-.97 3.183h-3.055l4.719-13.426h3.466l4.738 13.426h-3.053zm-1.647-5.561c-.896-2.884-1.401-4.515-1.514-4.893-.113-.378-.193-.677-.242-.896-.201.78-.777 2.71-1.729 5.789h3.485zM118.469 116.757c0 1.439-.45 2.54-1.349 3.301-.899.763-2.178 1.144-3.837 1.144h-1.216v4.756h-2.835v-13.372h4.271c1.622 0 2.855.349 3.7 1.047.844.699 1.266 1.74 1.266 3.124zm-6.402 2.122h.933c.872 0 1.524-.172 1.957-.517.433-.345.649-.846.649-1.504 0-.665-.182-1.156-.544-1.473-.363-.317-.932-.476-1.706-.476h-1.29v3.97zM73.951 56.759c-1.983-.653-4.838-.759-8.565-.759h-13.386v20h14.424c2.502 0 4.259-.249 5.271-.437 1.783-.318 3.274-.93 4.472-1.676 1.198-.744 2.183-1.869 2.955-3.293.771-1.424 1.158-3.087 1.158-4.951 0-2.184-.559-3.98-1.677-5.59-1.117-1.611-2.668-2.642-4.652-3.294zM71.895 48.147c1.97-.586 3.455-1.646 4.452-3.003.999-1.357 1.498-3.103 1.498-5.154 0-1.943-.466-3.675-1.398-5.154-.932-1.478-2.263-2.481-3.992-3.027-1.732-.544-4.7-.809-8.906-.809h-11.549v18h12.507c3.435 0 5.897-.399 7.388-.853zM117 16.126c0-7.802-6.325-14.126-14.127-14.126h-77.746c-7.802 0-14.127 6.324-14.127 14.126v77.748c0 7.802 6.325 14.126 14.127 14.126h77.746c7.802 0 14.127-6.324 14.127-14.126v-77.748zm-30.43 57.144c-1.157 2.356-2.589 4.173-4.292 5.451-1.704 1.277-3.841 2.446-6.41 3.098-2.569.653-5.717 1.181-9.444 1.181h-22.424v-59h22.065c4.473 0 8.059.62 10.761 1.804 2.703 1.185 4.818 3.021 6.351 5.483 1.53 2.463 2.296 5.046 2.296 7.735 0 2.502-.68 4.861-2.036 7.071-1.358 2.21-3.408 3.995-6.15 5.352 3.54 1.038 6.263 2.811 8.166 5.313 1.903 2.503 2.855 5.458 2.855 8.866-.001 2.742-.579 5.291-1.738 7.646z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress boot">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#fff" d="M13.699 108.645h8.047v17.421h-3.492v-14.026l-3.116.012h-.749c-1.74 0-2.707.073-2.9.218-1.039.282-1.917.882-2.634 1.8-.772 1.104-1.159 2.203-1.159 3.298 0 1.353.523 2.598 1.57 3.733.701.668 1.305 1.071 1.813 1.208.507.258 1.381.387 2.621.387h2.429v3.371h-2.911c-2.159 0-3.983-.568-5.474-1.704-1.079-.854-1.8-1.627-2.162-2.319-.902-1.434-1.354-2.9-1.354-4.398v-.507c0-2.094.785-4.015 2.356-5.763.95-.926 1.728-1.51 2.331-1.752.436-.242 1.035-.471 1.801-.688.684-.195 1.679-.291 2.983-.291zM39.324 112.124c.346.467.596.866.749 1.196.226.395.438.926.641 1.595.241.806.362 1.901.362 3.286v7.865h-3.492v-8.24c0-2.771-1.252-4.623-3.757-5.557-.572-.161-1.075-.246-1.511-.254-.435.008-.934.093-1.498.254-2.505.934-3.757 2.787-3.757 5.557v8.24h-3.504v-7.865c0-1.385.121-2.48.362-3.286.201-.668.415-1.2.641-1.595.153-.338.406-.737.761-1.196 1.877-2.304 4.209-3.456 6.995-3.456 2.788 0 5.123 1.152 7.008 3.456zM49.122 108.657c2.345 0 3.689.052 4.036.157.95.113 2.021.512 3.213 1.196.652.403 1.346 1.019 2.078 1.848 1.305 1.619 1.957 3.459 1.957 5.521 0 1.208-.233 2.348-.7 3.419-.918 2.086-2.429 3.592-4.53 4.519-.975.5-2.473.749-4.494.749h-7.406l-.387-.073v-3.31h8.167c.87 0 1.542-.077 2.018-.229 1.265-.427 2.19-1.063 2.778-1.909.717-1.071 1.075-2.114 1.075-3.129 0-1.023-.31-2.03-.93-3.021-.387-.572-.813-1.006-1.28-1.305-.854-.701-2.074-1.051-3.661-1.051h-8.167v-3.383h6.233zM62.219 108.657h11.188c1.973 0 3.52.592 4.639 1.776.5.467.846.918 1.039 1.353.436.87.652 1.72.652 2.549v.495c0 1.273-.552 2.517-1.654 3.733-.709.676-1.354 1.111-1.934 1.305 1.466 1.563 2.199 3.628 2.199 6.198h-3.516v-.266c0-1.901-.77-3.411-2.308-4.531-.878-.62-2.026-.93-3.443-.93h-6.862v-3.359h11.405c1.248 0 2.094-.616 2.537-1.848.048-.25.08-.459.096-.628 0-.685-.285-1.305-.857-1.86-.491-.387-1.015-.58-1.57-.58 0-.032-.169-.048-.508-.048h-11.103v-3.359zM90.26 108.668h.12c2.675 0 4.958 1.096 6.851 3.286 1.225 1.643 1.836 3.431 1.836 5.364v.121c0 2.674-1.119 4.945-3.358 6.813-1.627 1.208-3.411 1.813-5.352 1.813h-.121c-2.658 0-4.934-1.087-6.826-3.262-.66-.926-1.123-1.776-1.39-2.549-.313-.967-.471-1.913-.471-2.839v-.121c0-2.626 1.083-4.873 3.25-6.742 1.466-1.047 2.803-1.635 4.011-1.764.37-.079.853-.12 1.45-.12zm-5.232 8.675c0 1.514.592 2.843 1.776 3.987 1.055.902 2.162 1.353 3.322 1.353h.338c.935 0 1.885-.318 2.852-.955.998-.733 1.675-1.667 2.029-2.803.112-.298.193-.81.241-1.534 0-1.482-.575-2.791-1.728-3.927-1.079-.958-2.263-1.438-3.552-1.438-1.506 0-2.843.628-4.011 1.885-.491.645-.802 1.192-.931 1.643-.223.629-.336 1.225-.336 1.789zM100.879 108.668h3.491v17.397h-3.491v-17.397zM112.489 108.657c2.344 0 3.688.052 4.035.157.95.113 2.021.512 3.213 1.196.652.403 1.346 1.019 2.078 1.848 1.305 1.619 1.957 3.459 1.957 5.521 0 1.208-.233 2.348-.7 3.419-.918 2.086-2.429 3.592-4.53 4.519-.975.5-2.473.749-4.494.749h-7.406l-.387-.073v-3.31h8.167c.87 0 1.542-.077 2.018-.229 1.265-.427 2.19-1.063 2.778-1.909.717-1.071 1.075-2.114 1.075-3.129 0-1.023-.31-2.03-.93-3.021-.387-.572-.813-1.006-1.28-1.305-.854-.701-2.074-1.051-3.661-1.051h-8.167v-3.383h6.234zM29.19 76.835c-4.484.002-8.128-3.646-8.129-8.13l-.001-24.891c-.001-4.479 3.642-8.127 8.121-8.128 2.178-.002 4.216.843 5.753 2.377 1.537 1.535 2.383 3.578 2.384 5.749l-.002 24.892c.005 2.169-.837 4.21-2.373 5.744-1.534 1.54-3.578 2.387-5.753 2.387M29.184 37.871c-3.282-.002-5.942 2.665-5.943 5.944l.004 24.889c.001 3.291 2.666 5.946 5.944 5.95 3.285-.004 5.946-2.66 5.943-5.949v-24.893c-.002-3.279-2.665-5.943-5.948-5.941"></path><path fill="#fff" d="M92.942 39.104l-2.186-.001-53.54.007-2.186.001-.001-2.186c-.005-8.972 4.883-17.316 12.889-22.246l-3.112-5.682c-.38-.666-.476-1.509-.255-2.28.226-.771.757-1.434 1.469-1.813.412-.233.916-.363 1.424-.362 1.103 0 2.113.599 2.645 1.565l3.258 5.935c3.371-1.237 6.931-1.867 10.607-1.866 3.729-.001 7.307.629 10.691 1.871l3.253-5.944c.524-.965 1.541-1.565 2.642-1.564.496-.001.99.12 1.426.354.732.402 1.242 1.042 1.467 1.819.225.772.134 1.586-.258 2.293l-3.11 5.678c7.993 4.94 12.875 13.279 12.874 22.235l.003 2.186zM77.115 15.52l4.148-7.576c.221-.396.076-.903-.324-1.122-.405-.219-.906-.069-1.12.328l-4.191 7.652c-3.525-1.565-7.473-2.446-11.646-2.442-4.163-.004-8.104.873-11.619 2.434l-4.194-7.635c-.216-.402-.721-.549-1.117-.328-.402.215-.55.721-.327 1.117l4.149 7.569c-8.154 4.206-13.663 12.214-13.658 21.409l53.539-.006c.002-9.193-5.497-17.184-13.64-21.4m-25.309 11.707c-1.231-.002-2.237-1.005-2.237-2.243 0-1.234 1.004-2.247 2.24-2.247 1.24-.001 2.245 1.013 2.246 2.247 0 1.236-1.006 2.242-2.249 2.243m24.379-.005c-1.238.001-2.248-1-2.245-2.244 0-1.231 1.006-2.245 2.245-2.25 1.231.004 2.241 1.018 2.24 2.25.001 1.24-1.004 2.245-2.24 2.244M54.049 105.205c-4.48-.001-8.126-3.645-8.127-8.128l-.002-10.987-2.136.002c-2.282.001-4.422-.885-6.031-2.496-1.612-1.608-2.5-3.751-2.497-6.034l-.008-38.566v-2.188h2.186l53.138-.008 2.187-.001v2.186l.006 38.571c0 4.704-3.826 8.532-8.529 8.531l-2.148.001.002 10.981c0 4.481-3.646 8.129-8.124 8.129-2.171.004-4.209-.839-5.748-2.378-1.539-1.536-2.387-3.576-2.386-5.746v-10.986h-3.653v10.985c-.002 4.482-3.648 8.133-8.13 8.132"></path><path fill="#fff" d="M37.444 77.563c-.003 3.512 2.832 6.347 6.341 6.346h4.318l.005 13.169c-.001 3.279 2.663 5.944 5.94 5.945 3.283 0 5.944-2.668 5.941-5.95v-13.165l8.024-.002-.001 13.168c.004 3.28 2.671 5.948 5.946 5.942 3.284.002 5.946-2.666 5.945-5.946l-.004-13.166 4.334-.001c3.498.001 6.343-2.84 6.343-6.346l-.007-38.573-53.136.009.011 38.57zM98.816 76.825c-4.483.001-8.13-3.642-8.129-8.126l-.006-24.89c.001-4.484 3.642-8.131 8.122-8.131 4.486-.001 8.135 3.646 8.135 8.128l.002 24.889c.001 4.481-3.642 8.131-8.124 8.13M98.809 37.863c-3.282-.003-5.941 2.662-5.941 5.945l.002 24.889c.002 3.287 2.661 5.946 5.945 5.943 3.282 0 5.939-2.657 5.941-5.946l-.006-24.889c-.001-3.282-2.658-5.943-5.941-5.942"></path><path fill="#A4C439" d="M29.184 37.871c-3.282-.002-5.942 2.665-5.943 5.944l.004 24.889c.001 3.291 2.663 5.946 5.945 5.946 3.284 0 5.945-2.656 5.942-5.945v-24.893c-.002-3.279-2.665-5.943-5.948-5.941m47.931-22.351l4.148-7.576c.221-.396.075-.9-.325-1.124-.405-.214-.905-.069-1.119.33l-4.19 7.655c-3.526-1.569-7.471-2.449-11.646-2.444-4.163-.004-8.107.873-11.619 2.434l-4.194-7.635c-.218-.402-.72-.548-1.116-.329-.403.217-.551.722-.328 1.117l4.149 7.57c-8.154 4.206-13.663 12.214-13.658 21.409l53.539-.006c.001-9.194-5.498-17.185-13.641-21.401m-25.309 11.707c-1.231-.002-2.237-1.005-2.237-2.243 0-1.234 1.003-2.248 2.24-2.247 1.24-.001 2.245 1.013 2.246 2.247 0 1.236-1.006 2.242-2.249 2.243m24.379-.005c-1.238.001-2.245-1.002-2.245-2.244.005-1.23 1.006-2.245 2.245-2.25 1.231.004 2.241 1.018 2.24 2.25.003 1.24-1.004 2.245-2.24 2.244m-38.75 11.771l.008 38.572c-.002 3.509 2.836 6.341 6.342 6.341l4.318.001.005 13.169c-.001 3.279 2.665 5.945 5.94 5.945 3.283 0 5.944-2.668 5.945-5.949l-.003-13.164 8.024-.002.003 13.168c0 3.277 2.667 5.948 5.942 5.942 3.284.002 5.946-2.666 5.945-5.946l-.004-13.166 4.334-.003c3.498.001 6.343-2.834 6.345-6.344l-.007-38.572-53.137.008zm67.317 4.813c0-3.283-2.66-5.944-5.943-5.943-3.282-.003-5.941 2.662-5.941 5.945l.005 24.89c-.001 3.286 2.658 5.942 5.942 5.942 3.282 0 5.941-2.657 5.941-5.946l-.004-24.888z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress android">65%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#00618A" d="M2.001 90.458h4.108v-16.223l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108v-16.196c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976-1.304.395-1.936 1.159-1.936 2.739v16.197zM33.899 77.252h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0v-10.643h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417h-12.972v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z"></path><path fill="#E48E00" d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738h-11.535c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816.237.237.315.475.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026h-11.338v2.738zM100.511 85.692c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706v-2.738h-10.784c-2.41 0-3.318-.606-3.318-2.055v-14.168h-4.108v14.195zM77.503 85.834v-9.765c0-2.48 1.742-3.985 5.186-4.46.356-.053.753-.079 1.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395c-.752 0-1.543-.105-2.414-.343-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z"></path><path fill="#00618A" d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441-.9-1.735-1.786-3.631-2.585-5.458-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437-.427-.579-.854-1.341-1.149-2.011-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593c-.526-.01-.899.058-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress mysql">75%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#0074BD" d="M52.581 67.817s-3.284 1.911 2.341 2.557c6.814.778 10.297.666 17.805-.753 0 0 1.979 1.237 4.735 2.309-16.836 7.213-38.104-.418-24.881-4.113zM50.522 58.402s-3.684 2.729 1.945 3.311c7.28.751 13.027.813 22.979-1.103 0 0 1.373 1.396 3.536 2.157-20.352 5.954-43.021.469-28.46-4.365z"></path><path fill="#EA2D2E" d="M67.865 42.431c4.151 4.778-1.088 9.074-1.088 9.074s10.533-5.437 5.696-12.248c-4.519-6.349-7.982-9.502 10.771-20.378.001 0-29.438 7.35-15.379 23.552z"></path><path fill="#0074BD" d="M90.132 74.781s2.432 2.005-2.678 3.555c-9.716 2.943-40.444 3.831-48.979.117-3.066-1.335 2.687-3.187 4.496-3.576 1.887-.409 2.965-.334 2.965-.334-3.412-2.403-22.055 4.719-9.469 6.762 34.324 5.563 62.567-2.506 53.665-6.524zM54.162 48.647s-15.629 3.713-5.534 5.063c4.264.57 12.758.439 20.676-.225 6.469-.543 12.961-1.704 12.961-1.704s-2.279.978-3.93 2.104c-15.874 4.175-46.533 2.23-37.706-2.038 7.463-3.611 13.533-3.2 13.533-3.2zM82.2 64.317c16.135-8.382 8.674-16.438 3.467-15.353-1.273.266-1.845.496-1.845.496s.475-.744 1.378-1.063c10.302-3.62 18.223 10.681-3.322 16.345 0 0 .247-.224.322-.425z"></path><path fill="#EA2D2E" d="M72.474 1.313s8.935 8.939-8.476 22.682c-13.962 11.027-3.184 17.313-.006 24.498-8.15-7.354-14.128-13.828-10.118-19.852 5.889-8.842 22.204-13.131 18.6-27.328z"></path><path fill="#0074BD" d="M55.749 87.039c15.484.99 39.269-.551 39.832-7.878 0 0-1.082 2.777-12.799 4.981-13.218 2.488-29.523 2.199-39.191.603 0 0 1.98 1.64 12.158 2.294z"></path><path fill="#EA2D2E" d="M94.866 100.181h-.472v-.264h1.27v.264h-.47v1.317h-.329l.001-1.317zm2.535.066h-.006l-.468 1.251h-.216l-.465-1.251h-.005v1.251h-.312v-1.581h.457l.431 1.119.432-1.119h.454v1.581h-.302v-1.251zM53.211 115.037c-1.46 1.266-3.004 1.978-4.391 1.978-1.974 0-3.045-1.186-3.045-3.085 0-2.055 1.146-3.56 5.738-3.56h1.697v4.667h.001zm4.031 4.548v-14.077c0-3.599-2.053-5.973-6.997-5.973-2.886 0-5.416.714-7.473 1.622l.592 2.493c1.62-.595 3.715-1.147 5.771-1.147 2.85 0 4.075 1.147 4.075 3.521v1.779h-1.424c-6.921 0-10.044 2.685-10.044 6.723 0 3.479 2.058 5.456 5.933 5.456 2.49 0 4.351-1.028 6.088-2.533l.316 2.137h3.163v-.001zM70.694 119.585h-5.027l-6.051-19.689h4.391l3.756 12.099.835 3.635c1.896-5.258 3.24-10.596 3.912-15.733h4.271c-1.143 6.481-3.203 13.598-6.087 19.688zM89.982 115.037c-1.465 1.266-3.01 1.978-4.392 1.978-1.976 0-3.046-1.186-3.046-3.085 0-2.055 1.149-3.56 5.736-3.56h1.701v4.667h.001zm4.033 4.548v-14.077c0-3.599-2.059-5.973-6.999-5.973-2.889 0-5.418.714-7.475 1.622l.593 2.493c1.62-.595 3.718-1.147 5.774-1.147 2.846 0 4.074 1.147 4.074 3.521v1.779h-1.424c-6.923 0-10.045 2.685-10.045 6.723 0 3.479 2.056 5.456 5.93 5.456 2.491 0 4.349-1.028 6.091-2.533l.318 2.137h3.163v-.001zM37.322 122.931c-1.147 1.679-3.005 3.008-5.037 3.757l-1.989-2.345c1.547-.794 2.872-2.075 3.489-3.269.532-1.063.753-2.43.753-5.701v-22.482h4.284v22.173c0 4.375-.348 6.144-1.5 7.867z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress java">80%</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="square" id="third">
            <div class="squareTitleRight">
                <span class="espanol">Mi Trabajo</span>
                <span class="ingles">My work</span>
                <span class="squareSubTitle">SQLJudge</span></div>
            <div class="squareText trabajo show3 hidden">
                <p>
                <p class="espanol">
                    SQLJudge es el primer juez SQL abierto para todo el mundo en el cual un sin fin de usuarios podrán resolver problemas que serán evaluados por el juez. Este proyecto pretende ofrecer una nueva experiencia de aprendizaje para el alumno.
                    Este proyecto ya se encuentra implementado en algunas escuelas del estado de Guanajuato.</p>
                <p class="ingles">
                    Web designer of SQLJudge page, which is the first SQL judge open to everyone in which endless users can solve problems that will be evaluated by an automatic judge. This project seeks to provide a new learning experience to students.
                    This project is already implemented in some schools in Guanajuato state.
                </p>
                    <p></p>
                    <p></p>
                    <p>Link: <a href="http://sicenet.itsur.edu.mx:8088/_public/views/inicio.aspx">SQLJudge</a></p>
                </p>
            </div>
            <div class="squareImage show3 hidden"><img class="image sqljudge" src="https://s20.postimg.cc/gluva95ml/computer.png"></div>
        </div>

        <div class="square" id="fourth">
            <div class="squareTitle"><span class="squareSubTitle">PS4 Interface</span></div>
            <div class="squareImage show4 hidden"><img class="image yo ps4" src="http://graphiccave.com/wp-content/uploads/2015/04/PS4-Controller-PNG-Graphic-Cave.png"></div>
            <div class="squareText trabajo show4 hidden">
                <p>
                    <p class="espanol">PS4 Interface es un proyecto independiente que asemeja la interfaz gráfica de la consola de sony “playstation 4” en una plataforma web.</p>
                    <p class="ingles">PS4 Interface is an independent project that resembles the GUI console sony "playstation 4" on a web platform.</p>
                    <p></p>
                    <p>Link: <a href="https://pixmy.github.io/ps4">PS4 Interface</a></p>
                </p>
            </div>
        </div>


        <div class="square" id="fifth">
            <div class="squareTitleRight"><span class="squareSubTitle">SSRA</span></div>
            <div class="squareText trabajo show5 hidden">
                <p><p class="espanol">
                    SSRA es un programa que al partir de un número control dado de un alumno este muestra su avance de todos los semestres que ha cursado hasta la fecha desde cuantas materias debe hasta cuantos semestres le hacen falta para terminar.</p>
                    <p class="ingles">Developer of the project that aims to create academy history document of students from ITSUR institution, providing better information for advisers and teachers of a specific student.
This project is part of the internal software of the school.
</p>
                    <p></p>
                    <p></p>
                    <p class="espanol">Link: No disponible, programa privado.</p>
                    <p class="ingles">Link: Not available, private software</p>
                </p>
            </div>
            <div class="squareImage show5 hidden"><img class="image school" src="https://s20.postimg.cc/xg4ntkywt/school.png"></div>
        </div>

        <div class="firma">
        <div class="squareSubTitle fir espanol">Firma:</div>
        <div class="squareSubTitle fir ingles">Signature:</div>

            <svg
               xmlns:dc="http://purl.org/dc/elements/1.1/"
               xmlns:cc="http://creativecommons.org/ns#"
               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
               xmlns:svg="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
               width="75mm"
               height="77mm"
               viewBox="0 0 265.74804 272.83465"
               id="svg4166"
               version="1.1"
               inkscape:version="0.91 r13725"
               sodipodi:docname="arturo.svg">
              <defs
                 id="defs4168" />
              <sodipodi:namedview
                 id="base"
                 pagecolor="#ffffff"
                 bordercolor="#666666"
                 borderopacity="1.0"
                 inkscape:pageopacity="0.0"
                 inkscape:pageshadow="2"
                 inkscape:zoom="0.98994949"
                 inkscape:cx="237.21263"
                 inkscape:cy="204.15392"
                 inkscape:document-units="px"
                 inkscape:current-layer="layer1"
                 showgrid="false"
                 inkscape:window-width="1366"
                 inkscape:window-height="715"
                 inkscape:window-x="-8"
                 inkscape:window-y="-8"
                 inkscape:window-maximized="1" />
              <metadata
                 id="metadata4171">
                <rdf:RDF>
                  <cc:Work
                     rdf:about="">
                    <dc:format>image/svg+xml</dc:format>
                    <dc:type
                       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                    <dc:title></dc:title>
                  </cc:Work>
                </rdf:RDF>
              </metadata>
              <g
                 inkscape:label="Layer 1"
                 inkscape:groupmode="layer"
                 id="layer1"
                 transform="translate(0,-779.52757)">
                <path
                   style="fill:none;fill-opacity:1;stroke:#2ecc7f;stroke-opacity:0.94117647"
                   id="path4839"
                   d="m 233.74873,905.53196 c 0.4138,-11.24323 -5.27376,-21.90435 -9.84448,-31.81696 -5.01142,-9.43088 -10.40374,-18.87253 -17.37404,-27.03383 -2.96646,-3.47335 -8.85075,-9.4106 -13.24947,-11.48088 -2.16128,-1.01721 -4.64794,-1.10459 -6.97191,-1.65689 -2.32041,0.41248 -5.05506,-0.14853 -6.96125,1.23745 -1.06647,0.77543 4.05857,-0.24436 3.81352,1.05126 -1.05473,5.57664 -4.63465,10.36174 -6.95197,15.54262 -1.53555,6.79564 -3.64875,13.48613 -4.60665,20.38693 -2.82147,20.32599 -1.23562,27.89842 0.1396,48.38529 2.53437,20.08531 6.98063,39.94002 14.0268,58.94132 3.12964,8.43963 6.0952,15.03392 11.04316,22.41853 1.60036,2.3885 3.56801,4.5093 5.35201,6.7639 3.61414,3.2539 7.82795,8.0497 13.37859,7.1521 1.33007,-0.2151 4.87968,-2.2679 3.7187,-1.5842 -11.38984,6.708 -9.93151,5.9705 -5.13228,0.6843 5.50424,-7.8719 8.37529,-17.04506 10.06631,-26.40186 0.30477,-2.00384 0.54707,-4.0208 0.59321,-6.04892 0.006,-0.27932 0.003,-0.55898 -0.009,-0.83811 -0.004,-0.10333 -0.13335,-0.26299 -0.0401,-0.30767 4.41833,-2.11666 8.91979,-4.05523 13.37968,-6.08284 0.0136,4.12153 -0.90655,8.02678 -2.15186,11.92964 -1.43719,3.49182 -1.85043,5.08738 -4.38383,8.26485 -9.55755,11.98741 -25.13656,18.39051 -38.16444,25.27831 -7.28719,2.9238 -14.77164,5.329 -22.36707,7.3088 -2.63203,0.6861 -6.49667,1.7699 -9.36047,1.6325 -1.15782,-0.056 -2.26223,-0.5069 -3.39334,-0.7603 -0.93358,-1.0621 -2.12194,-1.9459 -2.80074,-3.1865 -2.11635,-3.8678 -3.73788,-12.0927 -4.60416,-15.7055 -0.9941,-4.1458 -1.9275,-8.3063 -2.94995,-12.44523 -5.5176,-22.33566 -4.75385,-18.72854 -11.82153,-43.46683 -13.63862,-43.79448 -28.49382,-87.21796 -44.551403,-130.1845 -2.35258,-5.82379 -4.39694,-11.76851 -6.73155,-17.59949 -0.6297,-1.57277 -1.17678,-3.19137 -1.99732,-4.67355 -0.31126,-0.56222 -1.90477,-1.0486 -1.35125,-1.3751 14.12735,-8.33307 12.64945,-8.86358 12.40789,-0.32062 0.53539,21.92158 2.95759,43.74793 3.766206,65.65389 0.60307,16.33737 0.27991,20.99717 -0.0573,37.09455 -0.4449,18.95513 -2.815256,37.77469 -6.417086,56.3671 -0.74384,3.7046 -2.01448,7.26242 -3.23292,10.82845 -0.88472,2.33751 -1.06917,4.83985 -1.63536,7.25445 -1.80607,7.77942 -2.63547,5.86685 -15.3796,11.21955 -0.82943,0.34837 -1.77332,-0.30428 -2.65998,-0.45643 -13.63501,-3.77913 -27.40812,-7.0268 -41.16974,-10.30672 -3.73405,-1.10769 -7.767231,-1.71222 -11.266891,-3.53695 -1.04535,-0.54505 -2.64646,-1.56807 -2.89857,-2.92041 -0.16734,-0.89764 0.15447,-1.81967 0.23171,-2.72951 1.59874,-2.06329 3.00287,-4.29328 4.79621,-6.18987 4.393391,-4.64635 20.085691,-18.76941 24.117151,-22.31972 15.51138,-13.66012 31.34622,-26.96639 46.9623,-40.50765 15.267003,-13.46985 30.572263,-26.92765 44.875323,-41.43029 0,0 12.83185,-5.30384 12.83185,-5.30384 l 0,0 c -15.56784,14.9317 -32.10122,28.79642 -48.370937,42.94809 -11.987446,10.25489 -19.322406,16.48181 -31.309896,26.93783 -12.62598,11.01294 -25.57504,21.98502 -36.85937,34.42242 -1.43749,1.58438 -2.62829,3.37619 -3.94244,5.06429 -0.19515,0.57773 -0.59592,1.12349 -0.58544,1.7332 0.0176,1.0266 1.57025,1.94826 2.18478,2.30089 3.21427,1.84443 6.91324,2.69336 10.39139,3.84664 13.7687,3.80748 27.64311,7.45486 41.78288,9.58487 7.18748,-0.0585 3.19399,-0.4939 -8.63249,7.03244 -0.23413,0.14899 0.56554,-0.13881 0.76246,-0.33437 0.63819,-0.63378 0.30995,-1.88532 0.70419,-2.6283 0.6815,-2.44556 0.95071,-4.95888 1.65904,-7.40244 1.30117,-3.68822 2.76933,-7.31164 3.99772,-11.02684 5.1923,-18.85042 8.68685,-38.12838 9.66709,-57.69256 0.21498,-6.01954 0.58685,-12.03553 0.64495,-18.05863 0.26833,-27.81885 -2.36233,-55.69278 -7.28735,-83.05579 -1.5324,-9.36326 -2.62546,-6.54114 12.56414,-13.43511 0.67114,-0.30461 0.60103,1.34978 0.81867,2.05394 1.30603,4.22572 2.311246,8.5388 3.515216,12.79472 1.00805,3.56334 2.048447,7.11744 3.072667,10.67615 5.35082,18.10218 10.70766,36.20034 16.44178,54.18626 8.25247,25.88514 17.03044,51.59892 25.65917,77.35965 2.88201,8.07287 11.60073,32.24001 14.76195,41.91867 2.69483,8.25073 3.63467,13.3199 6.67638,21.1365 0.71205,1.8298 1.45935,3.6726 2.52458,5.322 0.61651,0.9546 1.63074,1.5831 2.4461,2.3746 0.99362,0.1794 1.97146,0.5142 2.98086,0.5382 2.6073,0.062 6.33006,-0.8603 8.72631,-1.447 7.38711,-1.8087 14.65157,-4.1087 21.66856,-7.0555 -0.89059,0.7918 -3.76633,2.8463 -2.67177,2.3752 6.19013,-2.6641 13.89143,-8.8316 18.18063,-14.1144 2.39004,-2.94373 2.76197,-4.45374 4.0948,-7.73079 1.1112,-3.66767 1.99938,-7.42751 1.72138,-11.29024 14.87388,-8.25707 14.01549,-12.38164 13.25172,-6.11417 -0.26065,2.13894 -0.4856,4.28455 -0.92685,6.39686 -2.053,9.52115 -5.06631,18.87494 -10.18671,27.23064 -6.35256,8.2606 -3.21852,5.1992 -18.75429,13.3831 -2.64522,1.3934 -5.60957,1.3432 -8.29539,0.1207 -3.64744,-1.6603 -6.14704,-4.9588 -8.79982,-7.7526 -1.6297,-2.4108 -3.44303,-4.7073 -4.88911,-7.2326 -4.47507,-7.81474 -7.07714,-14.68147 -9.79272,-23.38642 -6.09422,-19.53535 -10.03808,-39.72825 -12.43869,-60.03061 -0.64995,-8.2119 -1.74742,-16.4006 -1.94985,-24.6357 -0.38311,-15.58576 0.57961,-28.58348 4.35522,-43.6204 1.31681,-5.24441 1.89924,-11.13175 5.3092,-15.32818 11.65762,-14.34635 13.50571,-13.29177 25.63387,-14.59765 2.34693,0.73426 4.87716,1.03405 7.04078,2.2028 2.42164,1.30812 4.47488,3.23024 6.48924,5.10585 5.39416,5.02261 8.38546,9.28865 12.56023,15.38997 5.8727,8.58284 6.34875,9.82113 11.49092,18.78615 1.49108,2.99966 3.0076,5.98681 4.47326,8.99897 3.41038,7.00892 7.23984,14.29539 7.76366,22.22948 0,0 -13.33516,6.7946 -13.33516,6.7946 z"
                   inkscape:connector-curvature="0" />
              </g>
            </svg>
        </div>


        <div class="square" id="comments">
             <div class="squareTitle">
                <span class="espanol">Comentarios</span>
                <span class="ingles">Comments</span>
                <span class="squareSubTitle ingles">What people say about me</span>
                <span class="squareSubTitle espanol">Lo que dicen de mi</span>
            </div>
            <div class="squareImage"><img class="image comentario" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/bubble-icon.png"></div>
            <div class="squareText">
                <script>
                    var idcomments_acct = '086f2496d8331781071cf1b7c1d68977';
                    var idcomments_post_id;
                    var idcomments_post_url;
                </script>
                <span id="IDCommentsPostTitle" style="display:none"></span>
                <script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
            </div>
        </div>

    </div>
</body>


</html>
            
          
!

CSS

            
              body{
	margin:0;
	padding: 0;
}



.cssa {
position:fixed; 
top:140px; 
right:0px; 
z-index:99999; 
}

.cssa a {
width:60px;
height:40px;
text-indent:-9999px;
display:block;
background:url('http://www.cssawds.com/ribbons/brand-award-right.png') no-repeat;
}



#IDCNavList{
	display: none !important;
}

#IDCommentsHeadLogin{
	display: none !important;
}

.idc-head_tools-share{
	display: none !important;
}



#comments a{
	color: #4CAF50;
	font-weight: normal !important;
}

.idc-r{
	background: url("");
}

#comments{
	color: #2d2d2d;
	background-color: #fff;
	font-family: 'Raleway', sans-serif;
}

.toggle{
	position: fixed;
	bottom: 5%;
	left: 2%;
	z-index: 1;
	font-size: calc(1em + 1vmin);
}

.toggle-on{
	font-family: arial !important;
	font-size: calc(.5em + .7vmin) !important;
	color: white !important;
	text-shadow: none !important;
}

.toggle-soft .toggle-on{
	background: #2ecc71 !important;
}

.toggle-soft .toggle-off{
	background: #3498db !important;
}

.toggle-off{
	font-family: arial !important;
	font-size: calc(.5em + .7vmin) !important;
	color: white !important;
	text-shadow: none !important;
}


.background{
  	background: linear-gradient(#2ecc71, #16a085); /* Standard syntax */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	transition: background .2s ease;
}

.body{
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	overflow-y: scroll;
	transition: background .2s ease;
}

.hire{
	position: fixed;
	z-index: 999;
	background-color: #2ecc71;
	border-radius: 10px;
	padding: 1em;
	color: white;
	font-size: calc(0.75em + .5vmin);
  font-family: 'Raleway', sans-serif !important;
	right: 5%;
	top: 5%;
	cursor: pointer;
	box-shadow: 0px 3px 2px 1px rgba(45,45,45,.5);
	transition: 0.3s ease;
}

.correo{
	margin-bottom: .5em;
}

.hire i{
	margin-right: 5px;
}

.info{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.correo i{
	margin-right: 1em; 
}

.tel i{
	margin-right: 1em; 
}

.hireClick{
	top: 10%;
	left: 20%;
	bottom: 10%;
	right: 20%;
	transition: 0.3s ease;
	text-align: center;
  font-family: 'Raleway', sans-serif !important;
  font-size: calc(1.5em + 1.3vmin);
}

.start{
  background-image:url("https://s20.postimg.cc/s44630fa5/image.jpg") !important;
  background-size: cover;
	background-position: center;
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
}

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.nombre{
	text-align: center;
	text-shadow: 0px 10px rgba(46, 204, 113,.6);
	color: white;
  font-family: 'Raleway', sans-serif !important;
  font-size: calc(5.75em + 5.3vmin);
	font-weight: bold;
	animation-delay: 0.5s;
}

.nombre p{
	margin-top: -.6em;
}

.iam{
	color: white;
	animation-delay: 0.6s;
	font-family: 'Raleway', sans-serif;
	text-align: center;
	border: 1px solid white;
	color: #2ecc71;
	background-color: white;
	padding: .5em;
	border-radius: 5px;
	border-bottom: 5px solid #2ecc71;
  font-size: calc(0.75em + 1.3vmin);
}

.line{
	height: 1px;
	width: 80%;
	background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
	animation: mymove2 3s linear;
  -webkit-transform: translate(20%, -10%);
  transform: translate(20%, -10%);
}

@keyframes mymove {
    from {transform: translate(120%, -10%);}
    to {transform: translate(-120%, -10%);}
}

@keyframes mymove2 {
    from {transform: translate(120%, -10%);}
    to {transform: translate(20%, -10%);}
}

@keyframes floating {
	0%{transform: translate(0px, 0px) rotate(0deg);}
	20% {transform: translate(0px, 7px) rotate(3deg);}
	40%{transform: translate(0px, -10px) rotate(0 deg);}
	60% {transform: translate(0px, 7px) rotate(-3deg);}
	100%{transform: translate(0px, 0px) rotate(0deg);}
}

.ps4{
	animation: floating 4s linear infinite;
}

.sqljudge{
	animation: floating 4s linear infinite;
}

.school{
	animation: floating 4s linear infinite;
}

.line2{
	height: 1px;
	width: 80%;
	background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
	animation: mymove 3s linear;
  -webkit-transform: translate(-120%, -10%);
  transform: translate(-120%, -10%);
}

/*PARTE DESPUES DE LA PRESENTACION*/

#first{
	background-color: #2d2d2d;
}

#first p{
	font-family: 'Open Sans', sans-serif;
}

.fa-heart{
	color: #e74c3c;
}

.yo{
	border: 12px solid #2ecc71;
	border-bottom-right-radius: 50%;
	border-top-left-radius: 50%;
}

/**/
#second{
	background-color: #fff;
	width: 100%;
}

#second .squareTitleRight{
	margin-right: 0;
}

#second .squareText{
	text-align: center;
	width: 95%;
}

.habilidades{
	width: 60%;
	margin: 0 auto;
}

.habilidad{
  width: 17%;
	min-width: 6em;
	border-radius: 5%;
	padding: .5em;
	background-color: #fff;
	border-bottom: 6px solid #2ECC71;
	margin: .5em;
	display: inline-block;
	box-shadow: 0px -0px 2px 1px rgba(45,45,45,.5);
	transition: 0.3s linear;
}

.habilidad:hover{
	box-shadow: 0px 6px 8px 1px rgba(45,45,45,.4);
	transform: translate(0px, -4px) !important;
	transition: 0.3s ease;
}

.habilidadPorcentaje{
	width: 100%;
	background-color: #2d2d2d;
	text-align: center;
}

.progress{
	color: white;
	font-family: 'Baloo Bhai', cursive;
}

.html{
	background-color: #F39C12;
	width: 80%;
}

.css{
	background-color: #3498DB;
	width: 75%;
}

.js{
	background-color: #F1C40F;
	width: 70%;
}

.jquery{
	background-color: #34495E;
	width: 70%;
}

.boot{
	background-color: #9B59B6;
	width: 70%;
}

.android{
	background-color: #2ECC71;
	width: 65%;
}

.mysql{
	width: 75%;
	background-color: #E67E22;
}

.java{
	background-color: #E74C3C;
	width: 80%;
}

#third{
	background-color: #2d2d2d;
}

#third p {
	font-family: 'Open Sans', sans-serif;
}

#third a{
	color: #2ecc71;
}

#fourth{
	background-color: #2ecc71;
}

#fourth p{
	font-family: 'Open Sans', sans-serif;
}

#fourth a{
	color: #2c3e50;
}

#fifth{
	background-color: white;
}

#fifth p{
	color: #2d2d2d;
	font-family: 'Open Sans', sans-serif;
}




/*CLASES PRINCIPALES------------------------*/

.square{
	width: 100%;
	margin: 0 auto;
	padding-top: 2em;
	padding-bottom: 2em;
}

.squareTitle{
	text-align: center;
	color: #2ecc71;
	font-family: 'Arvo', serif;
  font-size: calc(0.85em + 1.4vmin);
	margin-left: 20%;
}

.squareSubTitle{
	color: #bdc3c7;
	margin-left: 10px;
	padding-left: 10px;
	font-family: 'Raleway', sans-serif;
	border-left: 3px solid #bdc3c7;
}

.squareTitleRight{
	text-align: center;
	color: #2ecc71;
	font-family: 'Arvo', serif;
  font-size: calc(0.85em + 1.4vmin);
	margin-right: 20%;
}

.squareImage{
	width: 30%;
	display: inline-block;
	vertical-align: top;
}

.image{
	max-width: 16em;
  max-height:12em;
  width: auto;
  height: auto;
  margin:auto;
	display:block;
}

.squareText{
	width: 60%;
	display: inline-block;
	vertical-align: top;
	padding: 2%;
}

p{
	margin: 0 auto;
	color: white;
	line-height: 1.6;
  font-size: calc(0.9em + 1.3vmin);
}

@media screen and (max-width: 1000px) {
	
	.square{
		width: 100%;
	}
	
	.squareTitle{
		margin-left: 0;
		padding: .5em;
	}
	
	.squareTitleRight{
		margin-right: 0;
		padding: .5em;
	}
	
	.squareImage{
		width: 100%;
	}
	.squareText{
		width: 90%;
		text-align: center;
		margin: 0 auto;
		margin:auto;
		display:block;
	}
	
	.hire{
		width: 100%;
		text-align: center;
		font-size: 160%;
		top: 0;
		left: 0;
		right: 0;
		border-radius: 0;
	}
	
	.habilidad{
		width: 70%;
	}
	
	.progress{
    font-size: calc(0.95em + 1.4vmin);
	}
	
	.hireClick{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
    font-size: calc(1.6em + 1.4vmin);
	}
}

.hidden {
    opacity: 0;
}

.display{
	display: none;
}

.displaySee{
	display: block;
}

.visible {
    opacity: 1;
}

/*waves****************************/
.box {
	position: fixed;
	top: 87%;
	transform: rotate(60deg);
	left: 60%;
}
.wave {
	position: fixed;
	top: 0;
	left: 0;
  opacity: .4;
  position: absolute;
  top: 13%;
  left: 0%;
  background: #16a085;
  width: 1800px;
  height: 1800px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 7000ms infinite linear;
}
.wave.-three {
  animation: drift 7500ms infinite linear;
	position: fixed;
	background-color: #2ecc71;
}
.wave.-two {
  animation: drift 3000ms infinite linear;
  opacity: .1;
  background: black;
	position: fixed;
}
.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}
/*LOADING SPACE*/
.contain {
	animation-delay: 4s;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #25a7d7;
  background: -webkit-linear-gradient(#25a7d7, #2962FF);
  background: linear-gradient(#25a7d7, #25a7d7);
}
.icon {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}
/*Animation*/
.icon:nth-child(2) img {-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.icon:nth-child(3) img {-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.icon:nth-child(4) img {-webkit-animation-delay: 0.4s;animation-delay: 0.4s}
.icon img {
  -webkit-animation: anim 2s ease infinite;
  animation: anim 2s ease infinite;
  -webkit-transform: scale(0,0) rotateZ(180deg);
  transform: scale(0,0) rotateZ(180deg);
}
@-webkit-keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}
@keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}

.firma{
	padding-top: 1em;
	text-align: center;
	background-color: #2d2d2d;
}

.fir{
	border: 0;
}
            
          
!

JS

            
              
    var firmacount = 0;
    $(document).ready(function(){
        
        
        $(function(){
          // get hash value
          var hash = window.location.hash;
          // now scroll to element with that id
          $('html, body').animate({ scrollTop: $(hash).offset().top });
        });
        
        var altura = $(".body").height();
        var ancho = $(".body").width();

        $(".start").css("height",altura+"px");
        $(".start").css("width",ancho+"px");
        $("#first").css("margin-top",altura+"px");

        $("#hire").on("click", function(){
            $(this).toggleClass("hireClick");
            $('.info').toggleClass("displaySee");
        });

        $('.toggle').toggles({
          drag: true, // allow dragging the toggle between positions
          click: true, // allow clicking on the toggle
          text: {
            on: 'English', // text for the ON position Inglés
            off: 'Español' // and off
          },
          on: true, // is the toggle ON on init
          animate: 250, // animation time (ms)
          width: 100, // width used if not set in css
          height: 30, // height if not set in css
        });


        ingles();

        $('.toggle').on('toggle', function(e, active) {
          if (active) {
            ingles();
          } else {
            espanol();
          }});

    });

    $(window).resize(function(){
        var altura = $(".body").height();
        var ancho = $(".body").width();

        $(".start").css("height",altura+"px");
        $(".start").css("width",ancho+"px");
        $("#first").css("margin-top",altura+"px");
    });

    $( ".body" ).scroll(function() {
        if ($('.line').visible(true,true)) {
            $(".background").css("background", "linear-gradient(#2ecc71, #16a085)");
        }

        if ($('.show1').visible(false,true)) {
            $('.show1').addClass("animated slideInLeft visible");
            $('.show1').removeClass("hidden");
            $(".background").css("background", "linear-gradient(#ecf0f1, #7f8c8d)");
        }

        if ($('.show2').visible(true,true)) {
            $('.show2').addClass("animated slideInRight visible");
        }

        if ($('.show3').visible(true,true)) {
            $('.show3').addClass("animated slideInLeft visible");
            $(".background").css("background", "linear-gradient(#1abc9c, #16a085)");
        }

        if ($('.show4').visible(true,true)) {
            $('.show4').addClass("animated slideInRight visible");
            $(".background").css("background", "linear-gradient(#9b59b6, #34495e)");
        }

        if ($('.show5').visible(true,true)) {
            $('.show5').addClass("animated slideInRight visible");
            $(".background").css("background", "linear-gradient(#7f8c8d,#e74c3c)");
        }

        if($(".firma").visible(true)&& firmacount == 0){
            firmacount = 0;
            var paths = $('#svg4166 path:not(defs path)');
            paths.each(function(i, e) {
                e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
            });
            var tl = new TimelineMax();
            tl.add([
                TweenLite.to(paths.eq(0), 4, {
                    strokeDashoffset: 0,
                    delay: 0.0,
                    autoAlpha: 1
                })
            ]);
        }
    });
    


        
    function ingles(){
        $(".espanol").hide();
        $(".ingles").show();
    }

    function espanol(){
        $(".ingles").hide();
        $(".espanol").show();
    }

            
          
!
999px

Console